[RESOLVED] Duplicate Multiple Table Rows for Form in Javascript
Hi guys,
I'm trying to work my way up to being a novice in Javascript but I'm not there quite yet.
My problem is that I want to create a form in which multiple form fields can be duplicated/deleted upon clicking a button. I have some javascript here that does exactly that, but it will only do it for one table row. This creates a problem since the form I want to duplicate would contain multiple rows.
I've tried containing everything in a nested table within the duplicatable row. That actually works, but it disables the delete function. Same goes for using a div.
Here's the Javascript:
Code:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the vehicles.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
I was using your code , for cloning and i just realized that when i input some value in the text box and then hit the add row button ..it is actually copying the value inside the text box and cloning it too.
is there a way that i can clone the row but reset the values of input text box?
Also I want to understand what does this means :
inp.name=inp.name.replace(/\d{1,}/g,index);
Last edited by tweety.scorpion; 03-24-2011 at 10:14 AM.
I was using your code , for cloning and i just realized that when i input some value in the text box and then hit the add row button ..it is actually copying the value inside the text box and cloning it too.
is there a way that i can clone the row but reset the values of input text box?
They are always reset, because the cloning is made before any changes are possible. Or, have you change something?
Originally Posted by tweety.scorpion
Also I want to understand what does this means :
inp.name=inp.name.replace(/\d{1,}/g,index);
increments the names of the elements, in case it is needed. For instance, in an input on the first row has the name="address1", the cloned input on next row will get the name="address2", and so on.
Why does this add row in the second last row of the table?
I was seeing this example, but was unable to find out that how should i apply it so that it adds rows to end of the table.
Why does this add row in the second last row of the table?
I was seeing this example, but was unable to find out that how should i apply it so that it adds rows to end of the table.
But it adds the row at the end of the table. There is no other end I don't understand your question.
<script type="text/javascript">
// cloning rows
var clone;
function addRow(){
var tb=document.getElementById('ListTable').getElementsByTagName('tbody')[0];
cloneRow();
tb.appendChild(clone);
}
function cloneRow(){
var rows=document.getElementById('ListTable').getElementsByTagName('tr');
var index=rows.length+1;
clone=rows[rows.length-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0;
while(inp=inputs[i++] ){
inp.name=inp.name.replace(/\d{1,}/g,index);
}
var selects=clone.getElementsByTagName('select'), sel, j=0;
while(sel=selects[i++] ){
sel.name=sel.name.replace(/\d{1,}/g,index);
}
}
onload=cloneRow
</script>
You have formatted wrong the TABLE element. Even you don't write it explicitly, the TBODY exists. A table can have a lot of TBODYs, but if you fragment only a part of the TABLE with a TBODY, the interpreter of the browser will consider it as the second one (the first, as I said, is implicit, and it is considered to wrap all the rows which are not already wrapped in the other TBODY))
Thus, you wrote:
How do you put validation controls in cloned rows?
They work for the first row..but they don't work for other rows..
I used your cloning method.
Help would be appreciated.
I am doing something like this :
if($('#Category').val() == 0) {
errors = true;
error_message += 'Please select a Category.\r\n';
}
but when i clone the row (Add new rows) , validation does not works.
How do you put validation controls in cloned rows?
They work for the first row..but they don't work for other rows..
I used your cloning method.
Help would be appreciated.
I am doing something like this :
if($('#Category').val() == 0) {
errors = true;
error_message += 'Please select a Category.\r\n';
}
but when i clone the row (Add new rows) , validation does not works.
What is that: $('#Category').val()? JQuery? Don't use JQuery (nor any other JavaScript llybrary) till you haven't learned enough JavaScript language.
[RESOLVED] Duplicate Multiple Table Rows for Form in Javascript
Reply With Quote
Originally Posted by tweety.scorpion
I don't understand your question.
Bookmarks