|
n many projects we give options to users to add multiple rows for submitting multiple records. To do this we simply provide an add button, after clicking on which the user can add or clone another row using javascript. Through normal javascript we use insertCell(var) and appendChild(DOM) for creating cell and adding that cell to a parent element. Various properties of the cell including id, html, style etc are assigned during the insertCell() method. But jQuery provides a very simple function clone() to clone HTML elements. Using this function we can clone a row and add this row to table usinginsertBefore(). |
|
To make things clearer let me take help of code: |
| Antecedents/Triggers | Consequences | Timing | Consistency | |||||
|
||||||||
In the above code we have a single row with columns and a an icon that allows users to add more rows. Let us now take a look at the Javascript functionaddRow();
function addRow() {
var tbl = document.getElementById('tbl');
var Row = parseInt(document.getElementById('hsb').value);
var temprow=Row+1;
var mainRow = tbl.insertRow(temprow);
var trId ="tr"+temprow;
mainRow.id=trId;
var td = document.createElement("td");
td.colSpan='6';
var table = document.createElement("table");
table.border="0";
table.cellPadding="0";
table.cellSpacing="1";
table.width="100%"
var newRow = table.insertRow(0);
var sec = "'risk'";
var newCell = newRow.insertCell(0);
newCell.width="50%"
newCell.innerHTML = '
var newCell = newRow.insertCell(1);
newCell.width="17%"
newCell.innerHTML = '';
var newCell = newRow.insertCell(2);
newCell.width="10%"
newCell.innerHTML = 'SoonerLater';
var newCell = newRow.insertCell(3);
newCell.width="10%"
newCell.innerHTML = 'CertainUncertain';
td.appendChild(table);
mainRow.appendChild(td);
document.getElementById('hsb').value=temprow;
}
What we are doing here is, first we are creating all cells and adding their HTML content, then we are creating a row and adding these cells to the row and finally we are adding the row to the main table. Undoubtedly, this seems a very lengthy process and if the number of cells to be added is considerably larger, the code may become too bulky to be effective.
But all this can be avoided using a very simple jQuery function clone() to clone a HTML element. Using this function we clone a row and add this row to table using insertBefore().
$('#add').click(function(){AddRow({});
});
var AddRow=function(){
$('#tbl:first').clone().hide().insertBefore('#tbl:first').slideDown(function(){
//setting all elements value as blank
//We can do this by a single line code $('input',this).val(''); but this raises some cross browser issue
for(i=0; i