jQuery / Javascript相互比较两个表

Question

I need to compare two HTML tables' rows assuming that data in first cell can be duplicated but data in second cell is always unique. I need to find whether first cell AND second cell in table1 is the same as data in first cell AND second cell in table2 for instance:

Table1:

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

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

The result of this should be:

123 321 - good, do nothing 545 345 - good, do nothing 545 3122 - wrong its not in table1 <-

Here's what I've got so far...

$('#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>");

                    }

                }

            });

        });
     });  

Where am I going it wrong?

Just to clarify once again:

2nd table says : row1 - john|likesCookies row2 - peter|likesOranges

1st table says : row1 - john|likesNothing row2 - john|likesCookies row3 - steward|likesToTalk row4 - peter|likesApples

now it should say : john - value okay peter - value fail.

a lot alike =VLOOKUP in excel

Answer 1

If I understand your requirements, it would be easier to read the first table and store the couples as strings: 123/321, 545/345, etc...

Than you can read the second table and remove from the first list all the rows found in both. What remains in the list are couples that do not match.

Answer 2

From purely an efficiency standpoint if you loop through the first table just once and create an object using the first cell value as keys and an array of values for second cells, you won't have to loop through that table numerous times

this then makes the lookup simpler also

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')
  }
});

I'm not sure what objective is when matches aren't found

Answer 3

Check this working fiddle : here

I've created two arrays which store values in each row of tables 1 and 2 as strings. Then I just compare these two arrays and see if each value in array1 has a match in array 2 using a flag variable.

---

Snippet :

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

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