Jump to content
xisto Community
Inspiron

Adding Rows & Columns In Html Table Using Javascript

Recommended Posts

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

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

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
textbox prob in ajaxAdding Rows & Columns In Html Table Using Javascript

HI .,

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
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.