如何连接不同表中的行

Question

我有两个表，我需要允许用户将一个表中的行与另一个表中的行连接起来，例如：

以后当用户点击提交按钮时，我需要以这种方式获取有关这些连接的信息：

[ 
  {left: "Pera Lozac", right: "Eve Jakson"},  
  {left: "Mika Mikic", right: "Jill Smmith"},  
  {left: "Zika Zivac", right: "Joh Doe"},  
  {left: "Dezurni Krivac", right: "Joh Doe"},  
]

  

我应该如何使用HTML/Javascript来解决这个问题？

Answer 1

检查下面的代码段

  

用法： select(click)左表中任意数量的行，从右表中选择一行，然后点击添加连接，然后添加连接并显示在页面下方以javascript对象的形式。

注意：选中的行以灰色突出显示，并且在取消选择该行时将删除突出显示。

<强>段

＆＃13;

＆＃13;

$(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;
}

＆＃13;

#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%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

＆＃13;

＆＃13;

＆＃13;

点击此处查看此工作示例：fiddle

希望这有帮助！