I am working on a table that can be modified by pressing "Delete" buttons in each row and "Insert row" to add a new one at the end:
So far by now my code is:
<!DOCTYPE html>
<html>
<head>
<script>
function deleteRow(id,row) {
document.getElementById(id).deleteRow(row);
}
function insRow(id) {
var filas = document.getElementById("myTable").rows.length;
var x = document.getElementById(id).insertRow(filas);
var y = x.insertCell(0);
var z = x.insertCell(1);
y.innerHTML = '<input type="text" id="fname">';
z.innerHTML ='<button id="btn" name="btn" > Delete</button>';
}
</script>
</head>
<body>
<table id="myTable" style="border: 1px solid black">
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="deleteRow('myTable',0)"></td>
</tr>
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="deleteRow('myTable',1)"></td>
</tr>
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="deleteRow('myTable',2)"></td>
</tr>
</table>
<p>
<input type="button" onclick="insRow('myTable')" value="Insert row">
</p>
</body>
</html>
But i cannot attach the function onclick="deleteRow('myTable',0)" on
z.innerHTML ='<button id="btn" name="btn"> Delete</button>'
¿Is there something else i need to declare in order to make that button work when clicked?
Thanks for your answers
First off, IDs must be unique, so why not use classes here instead?
Second, if you're using jQuery, then use jQuery.
Third, you need to use event delegation when dynamically adding elements, so try the following:
$('#myTable').on('click', 'input[type="button"]', function () {
$(this).closest('tr').remove();
})
$('p input[type="button"]').click(function () {
$('#myTable').append('<tr><td><input type="text" class="fname" /></td><td><input type="button" value="Delete" /></td></tr>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" style="border: 1px solid black">
<tr>
<td>
<input type="text" class="fname" />
</td>
<td>
<input type="button" value="Delete" />
</td>
</tr>
<tr>
<td>
<input type="text" class="fname" />
</td>
<td>
<input type="button" value="Delete" />
</td>
</tr>
<tr>
<td>
<input type="text" class="fname" />
</td>
<td>
<input type="button" value="Delete" />
</td>
</tr>
</table>
<p>
<input type="button" value="Insert row">
</p>
On each DeleteRow(tableId,Index) function you are passing table id and static index that's why document.getElementById("mytable").deleteRow(Index) first find table node then find no of tr element as children and assigns the index to tr element start from 0 and delete the matching index tr element.
Whenever you delete first row then it will matches the 0 index from 3 elements and deletes the first row. Now there are 2 tr left with index 0 and 1 dynamically assign by table but you trying to match with 1 and 2.
for deleting second row it will delete tr with index 1 (third tr) not the second tr.
for deleting third row actual index is 0 (after deleting 2 rows) and you are passing 1 because of this reason it wont find the matching index.
Here is Simple javascript soltution.
<script>
function delRow(currElement) {
var parentRowIndex = currElement.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(parentRowIndex);
}
</script>
and html,
<table id="myTable" style="border: 1px solid black">
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
</table>
here is jsfiddle exmple
Click Here
Say you have the following table:
<table id="myTable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="firstName" /></td>
<td><input type="text" name="lastName" /></td>
<td> <input type="text" name="email" /></td>
</tr>
</tbody>
<p>
<label>Insert</label>
<input type="number" value="1" id="numberOfRowsToInsert">
<input type="button" value="Insert row" id="insert-line-button">
</p>
</table>
The following jquery code will generate x number of rows entered by the user and append them to the bottom of the table with the ability to delete them if needed:
$('#insert-line-button').on("click", function(){
var noOfRows = $('#numberOfRowsToInsert').val();
for(var i = 0; i < noOfRows; i++){
$('#myTable').append("<tr>" +
"<td><input type='text' name='firstName' /></td>" +
"<td><input type='text' name='lastName' /></td>" +
"<td> <input type='text' name='email' /></td>" +
"<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
"</tr>")
}
});
And the following jquery code will remove the rows when clicked on the 'Delete' button:
$("#myTable").on('click', 'input[id="deleteRowButton"]', function(event) {
$(this).parent().parent().remove();
});
Go through below code:
You can see that this is the most basic way to create dynamic table. You can use this approach and can try yourself to remove rows from the existing table. I have not used any pluggin/ jquery. You can just copy this code and save as an html file to see how this code is working. Go head! Good luck.
<html>
<script>
function CreateTableAndRows(){
var mybody = document.getElementsByTagName("body")[0];
var newTable = document.createElement("table");
var newTableHead = document.createElement("thead");
var headRow = document.createElement("tr");
var headHead1 = document.createElement("th");
var headRowCellValue = document.createTextNode("Device Name");
headHead1.appendChild(headRowCellValue);
var headHead2 = document.createElement("th");
headRowCellValue = document.createTextNode("Start Timing");
headHead2.appendChild(headRowCellValue);
var headHead3 = document.createElement("th");
headRowCellValue = document.createTextNode("End Timing");
headHead3.appendChild(headRowCellValue);
var headHead4 = document.createElement("th");
headRowCellValue = document.createTextNode("Duration");
headHead4.appendChild(headRowCellValue);
headRow.appendChild(headHead1);
headRow.appendChild(headHead2);
headRow.appendChild(headHead3);
headRow.appendChild(headHead4);
newTableHead.appendChild(headRow);
newTable.appendChild(newTableHead);
var newTableBody = document.createElement("tbody");
for(var rowCount=0;rowCount<5;rowCount++)
{
var newTableRow = document.createElement("tr");
for(var cellCount=0; cellCount<4; cellCount++)
{
var newTableRowCell = document.createElement("td");
var cellValue = document.createTextNode("cell is row"+rowCount+", coumn "+cellCount);
newTableRowCell.appendChild(cellValue);
newTableRow.appendChild(newTableRowCell);
}
newTableBody.appendChild(newTableRow);
}
newTable.appendChild(newTableBody);
newTable.setAttribute("border","2");
mybody.appendChild(newTable);
}
</script>
</head>
<body>
<input type="submit" onclick="CreateTableAndRows();">
</body>
</html>
Related
I have the following table structure
<form method=POST class='form leftLabels'>
<table >
<tr >
<th >Code:</th>
<td ><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr ><th >Name:</th>
<td ><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
// <<<< Here I would like to add a row
<tr >
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
The row that I am trying to add should have the following html:
<tr>
<th> Delete the record?</th>
<td><input type='checbox' name='delete' value=1></td>
</tr>
I have the following Javascript / jQuery code:
var trCnt=0;
$('table tr').each(function(){
trCnt++;
});
rowToInsertCheckbox = trCnt - 1;
$('table').after(rowToInsertCheckbox).append(
$(document.createElement('tr')),
$(document.createElement('td').html('Delete the record'),
$(document.createElement('td').html('Checkbox here?')),
);
which does find the right row after which the insert should be done, but the code does not work.
after() adds the new content after the target element, but outside it. tr need to be inside the table. In addition you need to append the td to the tr, not the table.
To place the new tr in your target position you can select the last tr in the table and use insertBefore(), like this:
let $newRow = $('<tr />').insertBefore('table tr:last');
$('<td>Delete the record?</td>').appendTo($newRow);
$('<td><input type="checkbox" name="delete" value="1"></td>').appendTo($newRow);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form leftLabels">
<table>
<tr>
<th>Code:</th>
<td><input type="text" name="f[id]" size="60" value="10" /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type="text" name="f[name]" size="60" value="Aa" /></td>
</tr>
<tr>
<td class="nogrid buttonsClass"><button type="submit">Save</button></td>
</tr>
</table>
</form>
One way to locate the row after which the content should be added is:
var tr = $("th").filter(function () {
return $(this).text() == "Name:";
}).closest("tr");
Then add the row:
$(tr).after("<tr><th> Delete the record?</th><td><input type='checkbox' name='delete' value=1></td></tr>");
$(document).ready(function() {
var tr = $("th").filter(function() {
return $(this).text() == "Name:";
}).closest("tr");
$(tr).after("<tr><th>Delete the record?</th>" +
"<td><input type='checkbox' name='delete' value=1></td>" +
"</tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method=POST class='form leftLabels'>
<table>
<tr>
<th>Code:</th>
<td><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
<tr>
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
I have tried to add input text element to my form
through this jquery code below
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="" name="item'+counter+'"/></td>';
cols += '<td><input type="text" class="" name="rate'+counter+'"/></td>';
cols += '<td><input type="text" class="" name="quantity'+counter+'"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#itemcounter").val(counter);
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
var count = $("#itemcounter").val();
$("#itemcounter").val(count-1);
counter = count -1;
});
});
Now the form is as below:
<form action="{{url('/billgenerate')}}" method="post">
<input type="hidden" name="itemcounter" id="itemcounter" value="">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Item Name</td>
<td>Rate</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input type="text" name="item0" class="" style="width:22em" />
</td>
<td class="col-sm-3">
<input type="text" name="rate0" class=""/>
</td>
<td class="col-sm-3">
<input type="text" name="quantity0" class=""/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block" name="addrow" id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
</form>
when I add add new row, it adds successfully, and also the element is added with its name increment by 1 so that while posting the page the name does not get conflicts.
but when I try to add a input predefined inside the table, php recognizes that particular element.
but when I try to add it through jquery code, it does not return the elements which are added. where am i going wrong?
I have table . There are three columns : Name , Price and button "Make Order". I must get data from each row to my Javascript. Each input have id such as productName and productPrice .
Table code:
<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<c:forEach items="${productList}" var="product" varStatus="status">
<tr>
<form>
<td> ${product.getProductName()}</td>
<input type="hidden" id="productName" name="productName" value=${product.getProductName()}>
<td>${product.getPrice()}</td>
<input type="hidden" id="productPrice" name="productPrice" value=${product.getPrice()}>
<td><input type="submit" onclick="makeOrder()" value="Make Order"></td>
</form>
</tr>
</c:forEach>
</table>
And my js:
<script type="text/javascript">
function makeOrder() {
var n=document.getElementById("productName").value;
var p=document.getElementById("productPrice").value;
alert("n="+n);
alert("p="+p);
//var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}
But when I click on my button I always alert first row of my table .
How can I alert other row ?
Use a unique row id for each row and pass that id with makeOrder() function and then find child elements inside that row whose id is passed in function...
Here is working example....
function makeOrder(rowId)
{
var n=document.getElementById(rowId).childNodes[5].value;
var p=document.getElementById(rowId).childNodes[9].value;
alert("n="+n);
alert("p="+p);
//var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}
<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<tr id="row1">
<form>
<td>P1</td>
<input type="hidden" id="productName" name="productName" value="P1">
<td>$5</td>
<input type="hidden" id="productPrice" name="productPrice" value="5">
<td><input type="button" onclick="makeOrder('row1')" value="Make Order"></td>
</form>
</tr>
<tr id="row2">
<form>
<td>P2</td>
<input type="hidden" id="productName" name="productName" value="P2">
<td>$6</td>
<input type="hidden" id="productPrice" name="productPrice" value="6">
<td><input type="button" onclick="makeOrder('row2')" value="Make Order"></td>
</form>
</tr>
</table>
You could call a function that gives all inputs with name productName, see below.
var n=document.getElementsByName("productName").value;
var p=document.getElementsByName("productPrice").value;
for(var i = 0; i < n.length; i++) {
alert("row 1: " + n[i].value + p[i].value);
}
This should return all your rows. Each alert will show the data of 1 row.
I want to develop a multilevel add more button using jquery.
I did that functionality, but its not success. It has many bugs. Some Logical issues are there...
My actual requirement there is one "Add more" button. When we click this add more button one Div will open. In side that div there is one text box and another one "add more" button
For example, First i add the main option value is "Bajaj". Under this option i want to add some options like "Discover", "Platina",...
Then i click next add more button and add the next option value is "Yamaha" under this Option i need to add sub options like FZ,YBR, Ray...
<div id="tabularoptions">
<input id="btnAdd" type="button" value="Add Options" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
<?php
if ($form['tabularOptions'] != '') {
foreach ($form['tabularOptions'] as $opt) {
?>
<div style="border:1px solid #ccc;margin: 10px;">
<table>
<tr>
<td>Option Value :</td>
<td>
<input name = 'tabluarOptionValue_<?php echo $opt['id']; ?>' type="text" value = "<?php echo $opt['tabularOptionValue']; ?>" />
<input type="hidden" name="tabluarOptionId_<?php echo $opt['id']; ?>" value="<?php echo $opt['id']; ?>">
</td>
<td><input type="button" value="Remove" class="remove" /></td>
<?php
if ($form['tabularSubOptions'] != '') {
foreach ($form['tabularSubOptions'] as $optsub) {
if ($optsub['tabularOptionId'] == $opt['id']) {
?>
<tr>
<td>
<input type="text" name="tabularSuboptionValue_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['tabularSuboptionValue']; ?>">
<input type="hidden" name="tabularSuboptionId_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['id']; ?>">
<input type="button" class="subOptionRemove" value="X">
</td>
</tr>
<?php
}
}
}
?>
</tr>
<tr>
</tr>
<tr>
<table>
<tr class="subOptionDiv">
<td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td>
</tr>
</table>
</tr>
</table>
</div>
<?php
}
}
?>
</div>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
$("body").on("click",".btnAdd1", function () {
$(this).closest("table").append('<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>');
});
$("body").on("click",".subOptionRemove", function () {
$(this).parent().remove();
});
});
var j = 1;
function GetDynamicTextBox(value) {
j=j+1;
$('#optionCount').val(j);
// alert(j);
return '<div id='+j+' style="border:1px solid #ccc;margin: 10px;"><table>\n\
<tr>\n\
<td>Option Value :</td>\n\
<td><input name = "tabluarOptionValue_'+j+'[]" type="text" value = "' + value + '" /></td>\n\
<td><input type="button" value="Remove" class="remove" /></td>\n\
</tr>\n\
<tr>\n\
</tr>\n\
<tr>\n\
<table>\n\
<tr class="subOptionDiv"><td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td></tr>\n\
<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>\n\
</table>\n\
</tr>\n\
</table></div>';
}
</script>
Please try this code may be usefull for you.
Put this jquery/javascript code where you js code is.
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
Put this code in your php/html file where you want the text box.
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
Try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<table width="100%" cellpadding="0" cellspacing="0" id="type">
<tr >
<td align="left">Subcategory</td>
</tr>
<tr>
<td>Type : <input type="text" name="type" id="type" /></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" id="subtype1">
<tr>
<td>
Subtype : <input type="text" name="type" id="type" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div>
<input type="button" name="addsub" value="Add Subtype" onclick="addmore('1')" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div>
<input type="button" name="add" value="Add Type" onclick="addmoretype()" />
</div>
Javascript
num = 2;
function addmore(id)
{
var tablename = "#subtype"+id;
$(tablename+' tr:last').after('<tr><td> Subtype: <input type="text" name="type" id="type" /> </td> </tr>');
}
function addmoretype()
{
$('#type tr:last').after('<tr> <td>Type : <input type="text" name="type" id="type" /></td></tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0" > <tr> <td> <table width="100%" cellspacing="0" cellpadding="0" id="subtype'+ num+'"> <tr> <td> Subtype : <input type="text" name="type" id="type" /></td></tr> </table></td> </tr><tr> <td> <div> <input type="button" name="addsub" value="Add Subtype" onclick="addmore('+ num+')" /> </div> </td> </tr></table> </td></tr>');
num++;
}
see working example
I'm not sure how to add a row where I want it.
<script language="javascript">
var i = 1;
function changeIt()
{
i++;
my_div.innerHTML = my_div.innerHTML +"<tr><td valign='middle'><strong>URL "+ i+":</strong></td><td><input name='url'+ i type='text' size='40' /></td></tr>"
}
</script>
<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
<table width="300px">
<tr>
<td valign="middle"><strong>Name:</strong></td>
<td><input name="name" type="text" size="40" /></td>
</tr>
<tr>
<td valign="middle"><strong>Password:</strong></td>
<td><input name="password" type="text" size="40" /></td>
</tr>
<tr>
<td valign="middle"><strong>URL:</strong></td>
<td><input name="url" type="text" size="40" />+</td>
</tr>
<tr id="my_div"></tr>
<tr>
<td valign="middle"><strong>ETC:</strong></td>
<td><input name="etc" type="text" size="40" /></td>
</tr>
The following is where I want the rows to appear:
<tr id="my_div"></tr>
Currently that produces new rows within a row. I don't want that. I only want a new row not in a row.
When I click the + I want it to produce:
<tr>
<td valign="middle"><strong>URL 2:</strong></td>
<td><input name="url2" type="text" size="40" /></td>
</tr>
I don't want that within:
<tr id="my_div"></tr>
I just have that there because I don't know what to do.
Don't use innerHTML to modify tables, it will throw an error in most versions of IE. Use DOM methods.
Don't use an A element when you don't want an link or anchor, use an element like a button or styled span.
You can't add a TR element as a child of a DIV element, it's invalid. You must add it as a child of a table section element (thead, tbody or tfoot). In some cases you can add rows to a table element but some browsers don't like that either.
So to create the new row, use:
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
// Much better to add a class and do this stuff with CSS
td.style.valign = 'middle';
var span = document.createElement('span');
span.style.fontWeight = 'bold';
span.appendChild(docment.createTextNode('URL ' + i);
td = tr.appendChild(document.createElement('td'));
var input = td.appendChild(document.createElement('input'));
input.name = 'url' + i;
input.type = 'text';
input.size = '40'
now append the TR to a table section somewhere.
document.getElementById('myTable').tBodies[0].appendChild(tr);
The whole thing looks like:
<script>
var i = 1;
function changeIt() {
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.style.valign = 'middle';
var span = td.appendChild(document.createElement('span'));
span.style.fontWeight = 'bold';
span.appendChild(document.createTextNode('URL ' + i));
td = tr.appendChild(document.createElement('td'));
var input = td.appendChild(document.createElement('input'));
input.name = 'url' + ++i;
input.type = 'text';
input.size = '40'
document.getElementById('myTable').tBodies[0].appendChild(tr);
}
</script>
<form>
<table width="300px">
<tr>
<td valign="middle"><strong>Name:</strong></td>
<td><input name="name" type="text" size="40" /></td>
</tr>
<tr>
<td valign="middle"><strong>Password:</strong></td>
<td><input name="password" type="text" size="40" /></td>
</tr>
<tr>
<td valign="middle"><strong>URL:</strong></td>
<td><input name="url" type="text" size="40">
<input type="button" onclick="changeIt();" value="+"></td>
</tr>
<tr id="my_div"></tr>
<tr>
<td valign="middle"><strong>ETC:</strong></td>
<td><input name="etc" type="text" size="40" /></td>
</tr>
</table>
</form>
<table id="myTable">
<tbody></tbody>
</table>
You could build the row to add in the bottom table and have it hidden, then just clone it and modify the bits that need it.
Ok, so to add another row to the table after URL1, give the row before, URL1, an id attribute then append to the innerHTML. I set the JS to retrive the current URL number, starting with 1, so that each time you click the button, it appends a URL row.
I also updated your name attribute to include the '' ticks
<script language="javascript">
var i = 1;
function changeIt(){
var myCurrentTable = document.getElementById("myTable");
var txt = myCurrentTable.innerHTML;
i++;
txt = txt.replace('<tr id="etc_row">', '</tr><tr id="url_row_' + i + '"><td valign="middle"><strong>URL '+ i+':</strong></td><td><input name="url' + i + '" type="text" size="40" /></td><tr id="etc_row">');
myCurrentTable.innerHTML = txt;
}
</script>
<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
<table id="myTable" width="300px">
<tr id="name_row">
<td valign="middle"><strong>Name:</strong></td>
<td><input name="name" type="text" size="40" /></td>
</tr>
<tr id="pw_row">
<td valign="middle"><strong>Password:</strong></td>
<td><input name="password" type="text" size="40" /></td>
</tr>
<tr id="url_row_1" >
<td valign="middle"><strong>URL:</strong></td>
<td><input name="url" type="text" size="40" />+</td>
</tr>
<tr id="etc_row">
<td valign="middle"><strong>ETC:</strong></td>
<td><input name="etc" type="text" size="40" /></td>
</tr>
</table>