Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Adding Rows Dynamically Using Javascript

Posted by: Enhanced Software Solutions Mar 24 2012, 05:06 AM

Hi ,

In my project i have used JavaScript code for adding Rows dynamically when user clicks on add image and deletion of row on click of delete image. The code works fine in Internet Explorer but not working in Fire Fox. I am un able to under stand the logic. Please guide me in this regard

[CODE]

<script language="javascript">
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var next_cnt = Number(document.frmCheckList.p_no_of_records.value) +1;
var colCount = table.rows[0].cells.length;
var row = table.insertRow(rowCount);
row.className='darkgrey';

for(var i=0; i<colCount; i++)
{
var newcell = row.insertCell(i);
newcell.className='formlabelR2';

newcell.innerHTML = table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].childNodes[0].type)
{

case "text":
newcell.childNodes[0].childNodes[0].value ="";
if(newcell.childNodes[0].childNodes[0].name.substring(0,8)=='p_submit'){
newcell.childNodes[0].childNodes[0].name = 'p_submit'+(next_cnt);
newcell.childNodes[0].childNodes[0].id = 'p_submit'+(next_cnt);
}
else if(newcell.childNodes[0].childNodes[0].name.substring(0,13)=='p_submit_date'){
newcell.childNodes[0].childNodes[0].name = 'p_submit_date'+(next_cnt);
newcell.childNodes[0].childNodes[0].id = 'p_submit_date'+(next_cnt);
newcell.childNodes[0].childNodes[0].value = "";

}

break;

case "button":
newcell.childNodes[0].childNodes[0].name = newcell.childNodes[0].name+(next_cnt);
newcell.childNodes[0].childNodes[0].id = newcell.childNodes[0].id+(next_cnt);
newcell.childNodes[0].childNodes[0].id.disabled = false;
document.getElementById(newcell.childNodes[0].childNodes[0].id).disabled = true;
break;

case "radio":
newcell.childNodes[0].childNodes[0].checked = false;
newcell.childNodes[0].childNodes[0].id = newcell.childNodes[0].id+(next_cnt);
newcell.childNodes[0].childNodes[0].value = next_cnt;
break;

case "check":
newcell.childNodes[0].childNodes[0].checked = false;
newcell.childNodes[0].childNodes[0].id = newcell.childNodes[0].id+(next_cnt);
newcell.childNodes[0].childNodes[0].value = next_cnt;
break;

}


}
document.frmCheckList.p_no_of_records.value = next_cnt;
}
</script>
<body>
<form method= "post" name="frmCheckList">

<table style="width:100%" id="tableCheckListDetails" cellspacing="2" border="0">
<tr>
<th width="10%"></th>
<th width="30%" class="labelHeader"><div align="center">Submitted/Received Document</div></th>
<th width="30%" class="labelHeader"><div align="center">Is Submitted / Received</div></th>
<input type="hidden" id="p_no_of_records" name="p_no_of_records" value="" />
</form>
</body>
</html>
<th width="30%" class="labelHeader"><div align="right">Submitted / Received On Date</div></th>
</tr>
<tr>
<td>
<div align="left">
<input type="radio" name="p_checklist" id="p_checklist" style="border:none;" />
<input type="image" src="/JAVAERPCLIENT/Images/app_edit.gif" id="p_detail_add" name="p_detail_add" alt="Add" onclick="addRow('tableCheckListDetails');return false" style="border:none;" />
<input type="image" src="/JAVAERPCLIENT/Images/app_delete.gif" id="p_detail_delete" name="p_detail_delete" alt="Delete" onclick="deleteRow('tableCheckListDetails');return false" style="border:none;" />
</div>
</td>
<td>
<div align="center">
<input type="text" id="p_submit" name="p_submit" value="" style="width:100%"/>
</div>
</td>
<td>
<div align="center">
<input type="checkbox" id="p_is_submit" name="p_is_submit" style="border:none;"/>
</div>
</td>
<td>
<div align="center">
<input type="text" id="p_submit_date" name="p_submit_date" value="" style="width:30%"/>
</div>
</td>
</tr>
</table>


Attached thumbnail(s)
Attached Image

Posted by: Christian J Mar 24 2012, 11:26 AM

QUOTE(Enhanced Software Solutions @ Mar 24 2012, 11:06 AM) *

The code works fine in Internet Explorer but not working in Fire Fox. I am un able to under stand the logic.

IE8 and older don't count whitespace and linebreaks as DOM nodes. In browsers that do count whitespace as nodes (like IE9 and Firefox) you get an error here:

CODE
switch(newcell.childNodes[0].childNodes[0].type)

due to the tabs and linebreaks between the HTML elements in the new cells. See also https://developer.mozilla.org/En/Whitespace_in_the_DOM

In addition the HTML syntax is incorrect, both regarding the form and table (use the Validator, see link on top of this page).

Posted by: Christian J Mar 24 2012, 12:37 PM

BTW, a possibly simpler way to add rows is by using cloneNode(). See e.g. http://www.quirksmode.org/dom/w3c_core.html#t91

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)