How to traverse table column & replace content vis DOM

rcflyer2005 · Sep 24, 2008

Hi,
I have a 10 column table where it can have 3 to n rows.
For each of the columns, I added id="col"+ column number.
So the id for the columns are col0, col1,col2,.., col9.

How do I traverse col1 and replace the content with the value of my "for loop" counter value? (var i=2;i<noRows,i++). The replacement value would be i-1. Rows 1 and 2 are headers. Data begins in column 3 thru col

. I need to renumber the "Line No" column because they are out of sequence due to row add/delete operations.

The image below shows the problem.

Thanks much!

BabyJeffy · Sep 24, 2008

I need to renumber the "Line No" column

Do you really? Surely you could suggest that the column is removed entirely - it's only purpose seems to be to take up space! I would suggest that as a "minimal cost - minimal effort" scenario.

To do this in javascript is going to be something like:

Code:

<html><head>
<title>Test table cell renumbering</title>
<script type="text/javascript">
function renumberTable(sTableId) {
	var oTable = document.getElementById(sTableId);
	if (oTable) {
		for (var loop=2, max=oTable.rows.length; loop<max; loop++) {
			oTable.rows[loop].cells[0].innerHTML = loop + 1;
		}
	}
}
</script>
</head><body>
<h1>Test table cell renumbering</h1>
<table id="myTable">
	<tbody>
		<tr><td><b>1</b></td><td>Test data (this row is not actually renumbered)</td></tr>
		<tr><td><b>2</b></td><td>Test data (nor is this row)</td></tr>
		<tr><td>5</td><td>Test data (this is the first row to be renumbered)</td></tr>
		<tr><td>6</td><td>Test data</td></tr>
		<tr><td>8</td><td>Test data</td></tr>
		<tr><td>9</td><td>Test data</td></tr>
		<tr><td>10</td><td>Test data</td></tr>
		<tr><td>11</td><td>Test data (and this will be the last row - row 8)</td></tr>
	</tbody>
</table>
<p>Click <a href="javascript://" onclick="renumberTable('myTable');return false;">Renumber</a> to renumber the rows in the table above.</p>
</body></html>

You may have to do some extra work if you have further markup in the cells that you need to update. You could always just renumber all rows (the first ones included) to make the loop more simple if you wanted.

Let us know how you go!

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

rcflyer2005 · Sep 26, 2008

It works beautifully.

Thanks very much!!!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to traverse table column & replace content vis DOM

rcflyer2005

Technical User

BabyJeffy

Programmer

rcflyer2005

Technical User

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to traverse table column &amp; replace content vis DOM

rcflyer2005

Technical User

BabyJeffy

Programmer

rcflyer2005

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor

How to traverse table column & replace content vis DOM