PDA

Click to See Complete Forum and Search --> : rows inserted using 'insertRow()' not displaying

manjigani
12-30-2003, 08:19 PM
I am creating a table with number of rows changing dynamically. The pseudo code looks like below.

<table id='tbl'>
<thead>
<th> col1 </th>
<th> col2 </th>
</thead>
<tbody>
<%for i= 1 to n%>
<tr>
<td> name=CELL1<%=i%> value="xyz" </td>
<td> name=CELL1<%=i%> value="xyz" </td>
</tr>

<%next %>
</tbody>
</table

n is an input from user, and I create the number of rows. I want to elminate this and use .insertRow() method to insert rows.


When I implemented it, it is incrementing # of rows. I have a display stament to show # of rows in the table (document.all.table.rows.length), but the rows are not being displayed.

I tried in a static table, 2x2, it is working fine...

Can someone throw light on this please?
Fang
01-03-2004, 05:34 AM
You have to give the cells content:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>InsertRow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
function InsertRows() {
var oRow;
var n=3;
for(i=1; i<=n; i++) {
oRow=tbl.insertRow();
oRow.insertCell(0).innerHTML="row"+i+" cell0";
oRow.insertCell(1).innerHTML="row"+i+" cell1";
}
}
//-->
//]]>
</script>
</head>
<body onload="InsertRows()">
<table id='tbl' border="1">
<thead>
<th> col1 </th>
<th> col2 </th>
</thead>
<tbody>
</tbody>
</table
</body>
</html>
manjigani
01-03-2004, 04:19 PM
Thanks for your posting. I was able to insert rows in a way similar to what you have suggested.

But I need those cells to be input type="text" so that users can enter data and I can read the data later to post into a database.

Do you know how I can do that? Esp., how to assign attributes "name" and "value" to a cell? I have not found the solution anywhere on the web:-(

Thanks in Advance
Fang
01-04-2004, 05:25 AM
Use the DOM to do this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add an input using the DOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[<!--
var num=1;
function AddRowInputs() {
var oTBody = document.getElementById('tablebody');
// add row
var oTR = document.createElement('TR');
oTBody.appendChild(oTR);
var CellsInRow=2;
for(var i=0; i<CellsInRow; i++) { // number of cells in row
// create input
var oInput = document.createElement('input');
oInput.setAttribute('name', 'cell'+(num++));
oInput.setAttribute('type', 'text');
oInput.setAttribute('size', '10');
oInput.onfocus = function() {alert(this.name)}; //click on an input to see it's name
// create cell containing input
var oTD = document.createElement('TD');
oTD.appendChild(oInput);
// add to row
oTR.appendChild(oTD);
}
// add to table
oTBody.appendChild(oTR);
}
//-->//]]>
</script>
</head>
<body>
<form action="#" id="myform" name="myform" onsubmit="AddRowInputs(); return false;">
<table cellspacing="0" cellpadding="5" border="2">
<thead>
<th> col1 </th><th> col2 </th>
</thead>
<tbody id="tablebody">
</tbody>
</table>
<button type="submit" id="submit">Another Row</button>
</form>
</body>
</html>