2009/08/28 09:03
To compare two HTML tables on web page in real time
2009/08/28 09:03 in HTML, Javascript
When you need to compare two tables on web page, you can simply read the content with innerHTML tag easily. But you need to analyze the table content. Following is the simple example to analyze two table content.
<script lanugage="text/javascript">
function CompareTables(table1,table2)
{
var instHasChange = false;
for(var i=0; i < table1.rows.length; i++)
{
var changes =RowExists(table2,table1.rows[i].cells[0].innerHTML,table1.rows[i].cells[1].innerHTML);
if(!changes[0])
{
table1.rows[i].style.backgroundColor = "red";
instHasChange = true;
}
else if(changes[1])
{
table1.rows[i].style.backgroundColor = "orange";
instHasChange = true;
}
}
for(var i=0; i < table2.rows.length; i++)
{
var changes = RowExists(table1,table2.rows[i].cells[0].innerHTML,table2.rows[i].cells[1].innerHTML);
if(!changes[0])
{
table2.rows[i].style.backgroundColor = "#00CC33";
instHasChange = true;
}
else if(changes[1])
{
table2.rows[i].style.backgroundColor = "orange";
instHasChange = true;
}
}
return instHasChange;
}
function RowExists(table,columnName,columnValue)
{
var hasColumnOrChange = new Array(2);
hasColumnOrChange[0] = false;
hasColumnOrChange[1] = false;
for(var i=0; i < table.rows.length; i++)
{
if(table.rows[i].cells[0].innerHTML == columnName)
{
hasColumnOrChange[0] = true;
if(table.rows[i].cells[1].innerHTML != columnValue)
hasColumnOrChange[1] = true;
}
}
return hasColumnOrChange;
}
</script>
function CompareTables(table1,table2)
{
var instHasChange = false;
for(var i=0; i < table1.rows.length; i++)
{
var changes =RowExists(table2,table1.rows[i].cells[0].innerHTML,table1.rows[i].cells[1].innerHTML);
if(!changes[0])
{
table1.rows[i].style.backgroundColor = "red";
instHasChange = true;
}
else if(changes[1])
{
table1.rows[i].style.backgroundColor = "orange";
instHasChange = true;
}
}
for(var i=0; i < table2.rows.length; i++)
{
var changes = RowExists(table1,table2.rows[i].cells[0].innerHTML,table2.rows[i].cells[1].innerHTML);
if(!changes[0])
{
table2.rows[i].style.backgroundColor = "#00CC33";
instHasChange = true;
}
else if(changes[1])
{
table2.rows[i].style.backgroundColor = "orange";
instHasChange = true;
}
}
return instHasChange;
}
function RowExists(table,columnName,columnValue)
{
var hasColumnOrChange = new Array(2);
hasColumnOrChange[0] = false;
hasColumnOrChange[1] = false;
for(var i=0; i < table.rows.length; i++)
{
if(table.rows[i].cells[0].innerHTML == columnName)
{
hasColumnOrChange[0] = true;
if(table.rows[i].cells[1].innerHTML != columnValue)
hasColumnOrChange[1] = true;
}
}
return hasColumnOrChange;
}
</script>
Another posts included in "HTML, Javascript"
| Photoshop script programming in Javascript (0) | 2009/09/14 |
| To hide/show area of web page without re-loading a page (0) | 2009/08/28 |
| Displays the html tags without rendering on a webpage (0) | 2009/08/28 |
| Javascript based query parser for AJAX application (0) | 2009/08/28 |
| To get web browser capability (0) | 2009/08/28 |
| Photo thumbnail viewer implement in javascript (0) | 2009/08/28 |
Prev
Rss Feed