Inspiron 0 Report post Posted March 15, 2006 I'm trying to create a website with a form that collects some user information to store in MySQL database. However, I've a problem when I want to dynamically add new rows and columns in the HTML table so that the user can add more information in the dynamically added textboxes.Here's what I have: <table border="0" width="90%" align="center" id="itemsTable"> <tr> <td width="20%"> Quantity </td> <td width="80%"> <input type="text" name="txtQuantity" value="" size="20" /> unit(s) </td> </tr> <tr> <td width="20%"> Dimensions </td> <td width="80%"> <input type="text" name="txtDimensions" value="" size="50" /> </td> </tr> <tr> <td width="20%"> Amount </td> <td width="80%"> S$ <input type="text" name="txtAmount" value="" size="20" /> </td> </tr> <tr> <td width="20%"> Remarks </td> <td width="80%"> <input type="text" name="txtRemarks" value="" size="50" /> <span style="font-style: italic; font-size: smaller;"> (optional) </span> </td> </tr> <tr> <td width="100%" colspan="2"> <!-- Center Space --> <br /> </td> </tr> </table> I want all rows and columns in this table to be repeated everytime the user pressed a "Add more infomation" button. So basically the entire table gets repeated again, printed out on the screen.Likewise, I'd also want the last set of rows and columns being dynamically added to be removed when the user press a "Remove last information inputs" button.So according to the codes above, I'd expect another set of "Quantity", "txtQuantity" textbox, "Dimensions", "txtDimensions" textbox, "Amount", "Amount" textbox, "Remarks", "Remarks" textbox, to be repeated again. And this set could be removed when the user press a "Remove last information inputs" button.How can I do that? Thanks alot. Share this post Link to post Share on other sites
iGuest 3 Report post Posted July 7, 2008 dynamically add new rows and columns in the HTML table Adding Rows & Columns In Html Table Using Javascript Replying to Inspiron You can try on of two approaches: 1- Use DHTML(http://forums.xisto.com/no_longer_exists/) 2- Use AJAX, which is more work but better performance. -reply by Tarek Share this post Link to post Share on other sites
spsarolkar 0 Report post Posted January 24, 2009 you can add row dynamically using javascript dom <html><head><script type="text/javascript">function insRow(){var x=document.getElementById('myTable').insertRow(0);var y=x.insertCell(0);var z=x.insertCell(1);y.innerHTML="NEW CELL1";z.innerHTML="NEW CELL2";}</script></head><body><table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr><tr><td>Row3 cell1</td><td>Row3 cell2</td></tr></table><br /><input type="button" onclick="insRow()" value="Insert row"></body></html> Share this post Link to post Share on other sites
iGuest 3 Report post Posted April 19, 2009 Hi All, The above code helped me a lot. I continuation to the above code I had one more doubt I want to edit the text inside the dynamically added rows,is it possibe with javascript <html><head><script type="text/javascript">Function insRow(){Var x=document.GetElementById('myTable').InsertRow(0);Var y=x.InsertCell(0);Var z=x.InsertCell(1);Y.InnerHTML="NEW CELL1";Z.InnerHTML="NEW CELL2";}</script></head><body><table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr><tr><td>Row3 cell1</td><td>Row3 cell2</td></tr></table><br /><input type="button" onclick="insRow()" value="Insert row"></body></html> if I want to dynamically edit the NEW CELL1 and NEW CELL2 field from the browser,is it possible? Please help thanks-reply by usha_14 Share this post Link to post Share on other sites
iGuest 3 Report post Posted August 27, 2009 Adding Rows & Columns In Html Table Using JavascriptAdding Rows & Columns In Html Table Using JavascriptYou can use jeditable function of javascript at "http://www.appelsiini.net/projects/jeditable is a best way to accomplish your editing task.-reply by mayank singh Share this post Link to post Share on other sites
iGuest 3 Report post Posted April 7, 2010 textbox prob in ajaxAdding Rows & Columns In Html Table Using JavascriptHI ., I have two textbox I enter a value in one textbox and I wish if it matches from table value then the corresponding record will show in another textbox also from table . I am using struts -reply by yogesh Share this post Link to post Share on other sites
