...

View Full Version : adding rows to table



planeboy747
02-01-2005, 04:18 AM
well i tried to make this script so that it would add rows to my table, but have no luck, and not sure where i went wrong...

<html>
<head>
<script type="text/javascript">
function insRow()
{
var x=document.getElementById('myTable').insertRow(3)
var w=x.insertCell(0)
var y=x.insertCell(1)
var z=x.insertCell(2)
w.innerHTML="Last name:<br><input name="last1" type="text" id="last1">"
y.innerHTML="First name:<br><input name="first1" type="text" id="first1">"
z.innerHTML="Phone:<br><input name="phone1" type="text" id="phone1">"
}
</script>
</head>

<body>
<form>
<table border="0" cellpadding="5" id="myTable">
<tr>
<td>Last name:<br>
<input name="last1" type="text" id="last1"></td>
<td>First name:<br>
<input name="first2" type="text" id="first2"></td>
<td>Phone:<br>
<input name="phone1" type="text" id="phone1"></td>
</tr>
</table>
<a href="#" onClick="insRow()">Add row</a>
</form>
</body>

</html>



Also, I'm trying to set a for loop, so that there will be no more than 9 rows. Here's what I put together:

for (i = 0; i <= 9; i++)

Is this correct? Where should I put it in the script?


Also, the IDs need to be dynamic based on the number of rows added (ie if you had 3 rows, then you should have lname1, lname2, and lname3, etc). Any thoughts here would be appreciated?


thanks
cj

Willy Duitt
02-01-2005, 04:36 AM
http://www.webdeveloper.com/forum/showthread.php?s=&threadid=55335

planeboy747
02-01-2005, 04:38 AM
it's call maximizing resources...

hemebond
02-01-2005, 05:11 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51373</title>
</head>
<body>
<form>
<fieldset>
<label for="name0">Name</label>
<input id="name0" name="name[]" type="text" value="">

<label for="phone0">Phone</label>
<input id="phone0" name="phone[]" type="text" value="">
</fieldset>

<input id="add_button" type="button" onclick="addFields()" value="Add Fields">
<input type="submit">
</form>

<script type="text/javascript">
var rows = 1;
var form = document.getElementsByTagName("form")[0];

function addFields()
{
var fieldset = document.createElement("fieldset");

fieldset.appendChild( createElement("label","for","name" + rows,"textNode","Name") );
fieldset.appendChild( createElement("input","id","name" + rows,"name","name[]","type","text","value","") );

fieldset.appendChild( createElement("label","for","name" + rows,"textNode","Phone") );
fieldset.appendChild( createElement("input","id","phone" + rows,"name","phone[]","type","text","value","") );

form.insertBefore(fieldset, document.getElementById("add_button"));

rows++;
}

function createElement(nodeName)
{
var element = document.createElement(nodeName);

for(var i = 1, l = arguments.length; i < l; i += 2)
{
if(arguments[i] == "textNode")
{
element.appendChild( document.createTextNode(arguments[i + 1]) );
}
else
{
element.setAttribute(arguments[i], arguments[i + 1]);
}
}

return element;
}
</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum