PDA

Click to See Complete Forum and Search --> : changing innerHTML of row

pornova
01-03-2006, 03:55 AM
Hi,
i have table like that

<table id="myTable1" border="1">
<tr id='0'>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>

<tr id='1'>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>

<tr id='2'>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
</table>

i can add a row but i also want to update row id.(new row must be "<tr id='3'>")but innerHTML property is read-only in tr , table and tbody tags do you have any idea for this problem

thanks a lot
Kor
01-03-2006, 04:06 AM
use DOM methods (createElement, setAttribute, appendChild), not innerHTML. On the other hand I don't see the reason for you need an id for the rows. And, very important, ids and names must NOT have a number as first character.

What is your final goal?
pornova
01-03-2006, 05:30 AM
thanks a lot
Kor
01-03-2006, 06:07 AM
Her's a basic example, using cloneNode() method. Maybe it will help you. Try learning/using DOM:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function addR(){
var root = document.getElementById('myTable1').getElementsByTagName('tbody')[0];//the tbody
var allRows = root.getElementsByTagName('tr');//rows collection in tbody
var ind = allRows.length+1;
var cloned = allRows[0].cloneNode(true);//the clone of the first row of the tbody
var allCells = cloned.getElementsByTagName('td')
cloned.setAttribute('id','t'+ind);//changes the indented id
for(var i=0;i<allCells.length;i++){
allCells[i].firstChild.data='Row '+ind+' Cell '+(i+1);//changes the text
}
root.appendChild(cloned)//appends the cloned row to the tbody
}
</script>
</head>
<body>
<table id="myTable1" border="1">
<thead>
<tr id='t0'>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr id='t1'>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr id='t2'>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
</tbody>
</table>
<br>
<input name="" type="button" value="Add a new row" onclick="addR()">
</body>
</html>