The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Adding Rows Dynamically Using Javascript, Adding Rows Dynamically Using Javascript
Rating  5
Enhanced Software Solutions
post Mar 24 2012, 05:06 AM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 22-March 12
From: Tenali
Member No.: 16,762



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Mar 24 2012, 12:37 PM
Post #2


.
********

Group: WDG Moderators
Posts: 6,174
Joined: 10-August 06
Member No.: 7



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


--------------------
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 1st November 2014 - 06:06 AM