Compare two HTML table data in jQuery

Last Reply one year ago By pandeyism

Posted one year ago

Hello Sir,

I have 2 tables in my database named: table1 and table2

columns in table1 are:Id,date,day,name

columns in table2 are:Id ,date,day

Here i want to check whether the date of table1 also exists into table2 if yes fetch the date.

my table1 is:

<html>
<head>
<style>
    table,th,tr,td{
        border:1px solid;
    }
</style>
</head>
<body>
<div>
<table>
<tr><th>Date1</th>
<th>Date2</th>
<th>Date3</th>
<th>Date4</th>
</tr>
<tr>
<td>12/04/2019</td>
<td>13/04/2019</td>
<td>14/04/2019</td>
<td>15/04/2019</td>
</table>
</div>
</body>
</html>

and table2 is:

<html>
<head>
<style>
    table,th,tr,td{
        border:1px solid;
    }
</style>
</head>
<body>
<div>
<table>
    <tr><th>Date</th></tr>
    <tr><td>12/04/2019</td>
</table>
</div>
</body>
</html>

Thank you

Posted one year ago

Hey democloud,

Please refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var row1 = $('#table tr');
        var row2 = $('#table2 tr');
        var td1 = row1.find("td");
        var td2 = row2.find("td");
        var result = "";
        for (var i = 0; i < td1.length; i++) {
            var val1 = $(td1).eq(i).html();
            for (var j = 0; j < td2.length; j++) {
                var val2 = $(td2).eq(j).html();
                if (val1 == val2) {
                    result += val1 + "\r\n";
                }
            }
        }
        alert("In both table common record is:\r\n" + result);
    });
</script>
<table id="table">
    <tr>
        <th>
            Date1
        </th>
        <th>
            Date2
        </th>
        <th>
            Date3
        </th>
        <th>
            Date4
        </th>
    </tr>
    <tr>
        <td>
            12/04/2019
        </td>
        <td>
            13/04/2019
        </td>
        <td>
            14/04/2019
        </td>
        <td>
            15/04/2019
        </td>
    </tr>
</table>
<table id="table2">
    <tr>
        <th>
            Date
        </th>
    </tr>
    <tr>
        <td>
            12/04/2019
        </td>
    </tr>
</table>

Demo