manojdubey Posted January 12, 2009 Share Posted January 12, 2009 Hi I am adding dynamic rows to a table through adding the individual row code into table innerHTML. Problem is it refreshes the existing content at every row add. As the row contents are very large I cannot go for adding it through individual element creation.Below is the sample code. Can someone suggest something to stop content refresh.Thanks in Advance.<HTML><HEAD><TITLE> New Document </TITLE><script>function addRow(){var content="";//content=document.getElementById('t1').innerHTML;var temp="<tr><td><input type=\"text\"></td></tr>";content+=temp;document.getElementById('t1').innerHTML+=content;}</script></HEAD><BODY><form><table><tr></td><table id="t1"> <tr><td><input type="text"></td></tr></table></td></tr></tr><tr><td><input type="button" value="Add" onClick="addRow()"></td></tr></form></BODY></HTML> Link to comment Share on other sites More sharing options...
manojdubey Posted January 12, 2009 Author Share Posted January 12, 2009 Thanks Everyone, I found the solution to this.Below is the code for your reference.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><script>function addRow(){var content="";var tbl=document.getElementById('t1');var row= document.createElement('tr');var temp="<tr><td><input type=\"text\"></td></tr>";row.innerHTML=temp;tbl.appendChild(row);}</script></HEAD><BODY><form><table><tr></td><table id="t1"> <tr><td><input type="text"></td></tr></table></td></tr></tr><tr><td><input type="button" value="Add" onClick="addRow()"></td></tr></form></BODY></HTML> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.