/    Sign up×
Community /Pin to ProfileBookmark

rows inserted using ‘insertRow()’ not displaying

Copy linkTweet thisAlerts:
Dec 31.2003

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, 2×2, it is working fine…

Can someone throw light on this please?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 03.2004 — You have to give the cells content:
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;InsertRow&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
&lt;!--
function InsertRows() {
var oRow;
var n=3;
for(i=1; i&lt;=n; i++) {
oRow=tbl.insertRow();
oRow.insertCell(0).innerHTML="row"+i+" cell0";
oRow.insertCell(1).innerHTML="row"+i+" cell1";
}
}
//--&gt;
//]]&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="InsertRows()"&gt;
&lt;table id='tbl' border="1"&gt;
&lt;thead&gt;
&lt;th&gt; col1 &lt;/th&gt;
&lt;th&gt; col2 &lt;/th&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@manjiganiauthorJan 03.2004 — 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
Copy linkTweet thisAlerts:
@FangJan 04.2004 — Use the DOM to do this:
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Add an input using the DOM&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[&lt;!--
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&lt;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);
}
//--&gt;//]]&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action="#" id="myform" name="myform" onsubmit="AddRowInputs(); return false;"&gt;
&lt;table cellspacing="0" cellpadding="5" border="2"&gt;
&lt;thead&gt;
&lt;th&gt; col1 &lt;/th&gt;&lt;th&gt; col2 &lt;/th&gt;
&lt;/thead&gt;
&lt;tbody id="tablebody"&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;button type="submit" id="submit"&gt;Another Row&lt;/button&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @manjigani spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...