用javascript对网页中两个表格内容逐项比对

怎么用js对网页中表格的内容进行逐项比对,如果不一样则让其背景变成红色。如图所示。

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

温馨提示:内容为网友见解,仅供参考
无其他回答

用javascript对网页中两个表格内容逐项比对
文档body{width:100%;}table{width:100%;margin-top:20px;}input{width:100px;height:30px;}\/**在两个表格结构相同的情况下:设表1的ID,也就是table标签的ID为“table1”;表2的ID为table2;**\/function testTable(){var t1 = document.getElementById('table1');var t2 = document.getEl...

怎麼办个儿童网站?
使用 DHTML 完全能够设计出复杂的,动态的,交互式的 WEB 页面,使我们的WEB 页面将因此而变得更为生动和精彩。DHTML目前正在发展中,尚没有形成一个标准。Microsoft 和 Netscape 两大公司对 DHTML 各有自己的看法,尽管两大公司都使用了很多相同的技术术语,并引用相同的已发表和提议的标准集合,但在具体实现中,两者不...

网站开发工具有哪些?
Split Browser (FF):将 Firefox 同一个浏览器视窗分为上下或左右两半,让你可以在同一个画面上同时看到两个或多个不同的网页内容,互相做比对,而不需要在多个视窗中切换来切换去。IE Tab (FF):虽然是叫做 IE Tab,但这可是 Firefox 的插件。让你在 Firefox 的浏览器视窗中开启 IE,神奇吧!MW...

什么是DOM?
DOM全拼为Document Object Model(文档对象模型)是一种用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、...

蜘蛛是什么
网络蜘蛛即Web Spider,是一个很形象的名字。把互联网比喻成一个蜘蛛网,那么Spider就是在网上爬来爬去的蜘蛛。网络蜘蛛是通过网页的链接地址来寻找网页,从 网站某一个页面(通常是首页)开始,读取网页的内容,找到在网页中的其它链接地址,然后通过这些链接地址寻找下一个网页,这样一直循环下去,直到把这个网 站所有的...

商城网站开发流程是什么?
网站建设方案的包括以下几个部分:1、客户情况分析;2、网站需要实现的目的和目标;3、网站形象说明;4、网站的栏目版块和结构;5、网站内容的安排,相互链接关系;6、使用软件,硬件和技术分析说明;7、开发时间进度表;8、宣传推广方案;9、维护方案;10、制作费用;11、本公司简介:成功作品,技术,人才说明等...

网站建设需要学习什么
3、css语言。css又作层叠样式表,css大部分是自动生成的,很难理解,需要学习基本的css知识,是步入高手的必经之路。css控制着网页图片、表格、文字等等内容在我们面前的显示样式,比如颜色,边框,大小等。css能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。4、div+css...

html是什么意思?
HTML是超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。网页的本质就是超级...

可以批量切割的电子书切割器
如果转换出来的内容不对,可能是因为真正的内容是用JavaScript动态生成的,可以选择“使用IE内核”,然后再点“开始转换”,重新试一遍。这个选项相当于IE的“另存为文本文件”功能,用缺省选项搞不定的网页,都可以用这个选项试试看。与在IE中打开网页不同的是,如果网页中有错,这里不会弹出错误对话框要求调试网页,而是...

如何申请伤残社会保障 5种方法来申请伤残社会保障
确保你随时保存了你填写的内容避免网页自动注销登录使你的信息丢失。(请确认你的浏览器可以运行JavaScript以便接收25分钟的提示信息。)5、完成向社会保障局公开信息的授权。为了顺利处理你的申请,社会保障局将需要你签署一份协议,允许他们与其他机构讨论你的情况以及是否可以拿到补贴。这份协议的签署完全自愿,但是如果无此...

相似回答