Table Connection JQuery

by jairajdesai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type="submit" id="add_conn" value="Add This Connection" />
<div id="one">
  <table border="1">
    <tr>
      <td>Pera</td>
      <td>Lozac</td>
      <td>11</td>
    </tr>
    <tr>
      <td>Mika</td>
      <td>Mikic</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Zika</td>
      <td>Zivac</td>
      <td>33</td>
    </tr>
    <tr>
      <td>Dezurni</td>
      <td>Krivac</td>
      <td>44</td>
    </tr>
  </table>

</div>
<div id="two">
  <table border="1">
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>

</div>
<div id="message">

</div>

CSS

#one {
  position: absolute;
  top: 10%;
  left: 1%;
}

#two {
  position: absolute;
  top: 10%;
  right: 35%;
}

table {
  overflow: hidden;
}

tr {
  background-color: #ffffff;
}

td {
  padding: 10px;
  position: relative;
  outline: 0;
}

body:not(.nohover) tbody tr:hover {
  background-color: #ffa;
}

.selected-bg-red {
  background-color: red;
}

.selected-bg-green {
  background-color: green;
}

#message {
  position: absolute;
  bottom: 10%;
  left: 70%;
}

JavaScript

$(document).ready(function() {
  var temp_color = '#dddddd';
  $('tr').on('click', function() {
    current_background = $(this).css('background-color');
    $(this).toggleClass('selected');
    if ($(this).hasClass('selected')) {
      $(this).css('background-color', temp_color);
    } else {
      $(this).css('background-color', '#fff');
    }
  });
  $('#add_conn').on('click', function() {
    var left = [];
    var right = [];
    $('tr').filter(function() {
      var match = 'rgb(255,255,255)';
      var this_element = $(this).css('background-color');
      if (hexc(this_element) != hexc(match)) {
        $(this).css('background-color', '#ffffff');
        $(this).toggleClass('selected');
        var count = 0;
        var string_test = "";
        $(this).find('td').each(function() {
          if (count < 2) {
            string_test += " " + $(this).text();
          }
          count++;
        });
        if ($(this).closest('div').attr('id') == "one") {
          left.push(string_test.trim());
        } else if ($(this).closest('div').attr('id') == "two") {
          right.push(string_test.trim());
        }
      }
    });
    var temp = $('#message').html();
    var arr = [];
    for (l = 0; l < left.length; l++) {
      arr.push({
        left: left[l],
        right: right[0]
      });
    }
    temp = temp + JSON.stringify(arr);
    $('#message').html(temp);
  });

});

function hexc(colorval) {
  var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  delete(parts[0]);
  for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
  }
  color = '#' + parts.join('');
  return color;
}