js表格内容比对

<html>
<head>
<meta charset="UTF-8">
<title>文档</title>
<style type="text/css">
body{
    width:100%;
}
table{
    width:100%;
    margin-top:20px;
}
input{
    width:100px;
    height:30px;
}
</style>
<script type="text/javascript">
/**
在两个表格结构相同的情况下:
 
设表1的ID,也就是table标签的ID为“table1”;
表2的ID为table2;
**/
function testTable(){
    var t1 = document.getElementById('table1');
    var t2 = document.getElementById('table2');
    var tRows = t1.rows.length;
    var tCells = t1.rows[1].cells.length;
    for(var i=1; i<tRows; i++){
        for(var p=0; p<tCells; p++){
            if(t1.rows[i].cells[p].innerHTML != t2.rows[i].cells[p].innerHTML){
                t2.rows[i].cells[p].style.backgroundColor = '#F00';
            }
        }
    }
}
</script>
</head>
 
<body>
<table border="1" cellspacing="0" cellpadding="0" id="table1">
    <tr>
        <th colspan="3">表头</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
<table border="1" cellspacing="0" cellpadding="0" id="table2">
    <tr>
        <th colspan="3">表头</th>
    </tr>
    <tr>
        <td>1</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>8</td>
    </tr>
</table>
<input type="button" value="检测" onClick="testTable()" />
</body>

</html>


题外话:

//第二种方法获取表格列的内容
用jQuery会方便一些,当然,用原生js也可以
$('tr').each(function(n){ //这里的n可有可无
//开始遍历每一行的每一列
for(var i=0;i<cells(3,列数);i++){
$(this).children('td').eq(i).text(); //这里就拿到了第n行第i列的文字,你可以赋值给其他变量
}

})



用原生js语法:
var table = document.getElementById("mySubjectsTable"); //获得整个表格对象
for (var i = 0; i < table.rows.length; i++) {
//表格的第i行,第2列
for (var j = 0; j < table.cells.length; j++) {
table.rows[i].cells[j].innerText.trim(" "));
}
}

猜你喜欢

转载自blog.csdn.net/weixin_41175479/article/details/80558395