Adding more than one row at a time to a table dynamically with dhTML.
-
I have some sample javascript code that will display a new row dynamically to a table. The problem is i need the code to add more than one row at a time instead of just one. The code is as follows: <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> <script language="javascript"> /* Function to append row (<TR> object) from template table(Id=Table1) to Target table (Id = Table) */ function AddRow() { var vTrgTbl = window.document.getElementById('Table'); var vSrcTbl = window.document.getElementById('Table1'); var vRow = vSrcTbl.lastChild.firstChild.cloneNode(true); var i; var noRows = 3; for (var i = 0; i < noRows; i++) vTrgTbl.lastChild.appendChild(vRow); } </script> </HEAD> <BODY> <!-- Target table in which the row to be appended at the end --> <p> Click Add button to add rows <table id="Table"> <tr> <td> <INPUT type="checkbox" name="ChkBox"> </td> <td> <INPUT type="Text" name="TxtCnt"> </td> <td> <SELECT id=CmbLng name=CmbLng> <OPTION value=1>One</OPTION> <OPTION value=2>Two</OPTION> <OPTION value=3>Three</OPTION> </SELECT> </td> </tr> </table> <table> <tr> <td> <INPUT type="button" value="ADD" onclick="AddRow()"></td> </tr> </table> <div style="visibility:hidden"> <!-- Template table that contians row to be appended into the first table --> <table id="Table1"> <tr> <td> <INPUT type="checkbox" name="ChkBox"> </td> <td> <INPUT type="Text" name="TxtCnt"> </td> <td> <SELECT id=CmbLng name=CmbLng> <OPTION value=1>One</OPTION> <OPTION value=2>Two</OPTION> <OPTION value=3>Three</OPTION> </SELECT> </td> </tr> </table> </div> <P> </P> </BODY> </HTML>
-
Answer:
Hi, You seem to have all the code you need, only with a small bug... You just have to re-initialize the variable vRow in each iteration: So, change the function AddRow() such that: function AddRow() { var vTrgTbl = window.document.getElementById('Table'); var vSrcTbl = window.document.getElementById('Table1'); var i; var noRows = 3; for (var i = 0; i < noRows; i++) { var vRow = vSrcTbl.lastChild.firstChild.cloneNode(true); vTrgTbl.lastChild.appendChild(vRow); } } Hope this helps Regards Bio
roderick_thomas-ga at Google Answers Visit the source
Related Q & A:
- How to add primary key from multiple table as a foreign key in a table in sql server 2008?Best solution by stackoverflow.com
- How to highlight a row in a listview?Best solution by Stack Overflow
- How to add new row to a databound gridview?Best solution by Stack Overflow
- How can I attach more than one file at a time in Yahoo mail?Best solution by pc.net
- How do you add one more msn address at a time?Best solution by Yahoo! Answers
Just Added Q & A:
- How many active mobile subscribers are there in China?Best solution by Quora
- How to find the right vacation?Best solution by bookit.com
- How To Make Your Own Primer?Best solution by thekrazycouponlady.com
- How do you get the domain & range?Best solution by ChaCha
- How do you open pop up blockers?Best solution by Yahoo! Answers
For every problem there is a solution! Proved by Solucija.
-
Got an issue and looking for advice?
-
Ask Solucija to search every corner of the Web for help.
-
Get workable solutions and helpful tips in a moment.
Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.