When using table for displaying data, the repetitious data like showed in the top table, should be merged into one cell for better look. But if the data come from a SQL query result it's quite difficult to know the number of rowspan for the "<tr>" tag.
What I do is write out all the repetitious data ( like one in the top table)? and then I run javascript to merge the cells. The javascript could be something like this:
JavaScript:
-
<table border="1" width="427" id="merge">
-
<tr>
-
<th width="195">Supplier</th>
-
<th width="216">Product Name</th>
-
</tr>
-
<tr>
-
<td>Grandma Kelly's Homestead</td>
-
<td>Grandma's Boysenberry Spread</td>
-
</tr>
-
<tr>
-
<td>Grandma Kelly's Homestead</td>
-
<td>Uncle Bob's Organic Dried Pears</td>
-
</tr>
-
<tr>
-
<td>Grandma Kelly's Homestead</td>
-
<td>Northwoods Cranberry Sauce</td>
-
</tr>
-
<tr>
-
<td>Tokyo Traders</td>
-
<td>Mishi Kobe Niku</td>
-
</tr>
-
<tr>
-
<td>Tokyo Traders</td>
-
<td>Ikura</td>
-
</tr>
-
</table>
-
<script language="javascript">
-
var myTable = document.getElementById('merge');
-
var rows = myTable.getElementsByTagName('tr');
-
var numRows = rows.length;
-
var numRowSpan=1;
-
for (var j = 1; j <(numRows-1); j++) {
-
if (numRowSpan<=1) {
-
var currentRow = myTable.getElementsByTagName('tr')[j];
-
var currentCell= currentRow.getElementsByTagName('td')[0]; // the 1st column
-
var currentCellData = currentCell.childNodes[0].data;
-
}
-
if (j<numRows-1) {
-
if (myTable.getElementsByTagName('tr')[j+1]) {
-
var nextRow = myTable.getElementsByTagName('tr')[j+1];
-
var nextCell = nextRow.getElementsByTagName('td')[0];
-
var nextCellData = nextCell.childNodes[0].data;
-
// compare the current cell and the next cell
-
if (currentCellData == nextCellData) {
-
numRowSpan += 1;
-
currentCell.rowSpan = numRowSpan;
-
nextCell.style.display = 'none'; //disappear the next cell
-
} else {
-
numRowSpan = 1;
-
}
-
}
-
}
-
}
-
</script>
dear author,
i am trying to use your code. need your help. please contact.