jQuery / Javascript将两个表相互比较

时间:2016-02-04 21:47:09

标签: javascript jquery

我需要比较两个HTML表的行,假设第一个单元格中的数据可以复制,但第二个单元格中的数据始终是唯一的。我需要查找table1中的第一个单元格和第二个单元格是否与table2中第一个单元格和第二个单元格中的数据相同:

表1:

<Table>
    <tr>
        <td>123</td>
        <td>321</td>
    </tr>
    <tr>
        <td>545</td>
        <td>345</td>
    </tr>
    <tr>
        <td>0</td>
        <td>312</td>
    </tr>
    <tr>
        <td>123</td>
        <td>323331</td> 
    </tr>
</Table>

第二张表:

<table>
    <tr>
        <td>545</td>
        <td>345</td>
    </tr>
    <tr>
        <td>545</td>
        <td>3122</td>
    </tr>
    <tr>
        <td>123</td>
        <td>321</td>
    </tr>
</table>

结果应该是:

123 321 - 好,什么都不做 545 345 - 好,什么都不做 545 3122 - 错误的不在table1&lt; -

这是我到目前为止所得到的......

$('#runCheck').click(function(){
        var firstTable = $('#firstDiv table tr');
        var secondTable = $('#secDiv table tr');

        $(secondTable).each(function(index){
            var $row = $(this);
            var secTableCellZero = $row.find('td')[0].innerHTML;
            var secTableCellOne = $row.find('td')[1].innerHTML;

            $(firstTable).each(function(indexT){


                if ($(this).find('td')[0].innerHTML === secTableCellZero){
                    if ($(this).find('td')[1].innerHTML !== secTableCellOne){
                        $('#thirdDiv').append("first: " + secTableCellZero + " second: " + secTableCellOne+"<br>");

                    }

                }

            });

        });
     });  

我哪里错了?

再次澄清一下:

第二张表说: row1 - john | likesCookies row2 - peter | likesOranges

第一张表说: row1 - john | likesNothing row2 - john | likesCookies row3 - 管家| likesToTalk row4 - peter | likesApples

现在应该说: 约翰 - 价值没关系 彼得失败。

很多相似= excel中的VLOOKUP

3 个答案:

答案 0 :(得分:0)

如果我理解你的要求,那么阅读第一张表并将情侣存储为字符串会更容易:123 / 321,545 / 345等......

您可以阅读第二个表并从第一个列表中删除在两个表中找到的所有行。 列表中剩下的是不匹配的夫妇。

答案 1 :(得分:0)

从纯粹的效率角度来看,如果你只使用第一个表循环第一个表并使用第一个单元格值作为键和第二个单元格的值数组创建一个对象,那么您将无法循环遍历该表次

然后使查找更简单

var firstTable = $('#firstDiv table tr');
var secondTable = $('#secDiv table tr');

var firstTableData = {}
firstTable.each(function() {
  var $tds = $(this).find('td'),
    firstCellData = $tds.eq(0).html().trim(),
    secondCellData == $tds.eq(1).html().trim();

  if (!firstTableData[firstCellData]) {
    firstTableData[firstCellData] = []
  }
  firstTableData[firstCellData].push(secondCellData)
})

$(secondTable).each(function(index) {
  var $tds = $(this).find('td');
  var secTableCellZero = $tds.eq(0).html().trim();
  var secTableCellOne = $tds.eq(1).html().trim();

  if (!firstTableData.hasOwnProperty(secTableCellZero)) {
    console.log('No match for first cell')
  } else if (!firstTableData[secTableCellZero].indexOf(secTableCellOne) == -1) {
     console.log('No match for second cell')
  }
});

我不确定找不到比赛时的目标是什么

答案 2 :(得分:0)

检查这个工作小提琴:here

我创建了两个数组,它们将表1和表2的每一行中的值存储为字符串。然后我只是比较这两个数组,看看array1中的每个值是否在数组2中使用标志变量匹配。

代码段

&#13;
&#13;
$(document).ready(function() {
  var table_one = [];
  var table_two = [];
  $("#one tr").each(function() {
    var temp_string = "";
    count = 1;
    $(this).find("td").each(function() {
      if (count == 2) {
        temp_string += "/";
      }
      temp_string = temp_string + $(this).text();
      count++;
    });
    table_one.push(temp_string);
  });
  $("#two tr").each(function() {
    var temp_string = "";
    count = 1;
    $(this).find("td").each(function() {
      if (count == 2) {
        temp_string += "/";
        temp_string = temp_string + $(this).text();
      } else {
        temp_string = temp_string + $(this).text();
      }
      count++;
    });
    table_two.push(temp_string);
  });
  var message = "";
  for (i = 0; i < table_two.length; i++) {
    var flag = 0;
    var temp = 0;
    table_two_entry = table_two[i].split("/");
    table_two_cell_one = table_two_entry[0];
    table_two_cell_two = table_two_entry[1];
    for (j = 0; j < table_one.length; j++) {
      table_one_entry = table_one[j].split("/");
      table_one_cell_one = table_one_entry[0];
      table_one_cell_two = table_one_entry[1];
      console.log("1)" + table_one_cell_one + ":" + table_one_cell_two);
      if (table_two_cell_one == table_one_cell_one) {
        flag++;
        if (table_one_cell_two == table_two_cell_two) {
          flag++;
          break;
        } else {
          temp = table_one_cell_two;
        }
      } else {}
    }
    if (flag == 2) {
      message += table_two_cell_one + " " + table_two_cell_two + " found in first table<br>";
    } else if (flag == 1) {
      message += table_two_cell_one + " bad - first table has " + temp + "<br>";
    } else if (flag == 0) {
      message += table_two_cell_one + " not found in first table<br>";
    }
  }
  $('#message').html(message);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="one">
  <tr>
    <td>123</td>
    <td>321</td>
  </tr>
  <tr>
    <td>545</td>
    <td>345</td>
  </tr>
  <tr>
    <td>0</td>
    <td>312</td>
  </tr>
  <tr>
    <td>123</td>
    <td>323331</td>
  </tr>
</table>
<hr>
<table id="two">
  <tr>
    <td>545</td>
    <td>345</td>
  </tr>
  <tr>
    <td>545</td>
    <td>3122</td>
  </tr>
  <tr>
    <td>123</td>
    <td>321</td>
  </tr>
</table>
<hr>
<div id="message">
</div>
</div>
&#13;
&#13;
&#13;