如何连接来自不同表的行

Question

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

稍后当用户点击提交按钮时，我需要这样的连接信息：

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

How should I go about this using HTML/Javascript ?

Answer 1

检查下面的代码片段

Usage : select(click) any number of rows from the left table and select one row from the right table, then click Add Connection, the connection is then added and displayed below on the page in the form of a javascript object.

注意： 选定的行以灰色突出显示，当该行未被选中时，突出显示将消失。

片段

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

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

<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>

在此处检查此工作示例：fiddle

希望对您有所帮助！

如何连接来自不同表的行

How to connect rows from different tables

html

javascript

drag-and-drop

html-table