Adding Rows & Columns In Html Table Using Javascript

Inspiron

Mar 15 2006, 06:59 PM

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:

CODE

<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">
                    
                    <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.

Comment/Reply (w/o sign-up)

iGuest-Tarek

Jul 7 2008, 08:23 PM

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://www.W3schools.Com/htmldom/met_table_insertrow.Asp)
2- Use AJAX, which is more work but better performance.

-reply by Tarek

Comment/Reply (w/o sign-up)

spsarolkar

Jan 24 2009, 06:45 AM

you can add row dynamically using javascript dom

CODE

<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>

Comment/Reply (w/o sign-up)

(G)usha_14

Apr 19 2009, 07:43 AM

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

Comment/Reply (w/o sign-up)

(G)mayank singh

Aug 27 2009, 06:59 AM

Adding Rows & Columns In Html Table Using Javascript
Adding Rows & Columns In Html Table Using Javascript

You can use jeditable function of javascript at "http://www.Appelsiini.Net/projects/jeditable".This is a best way to accomplish your editing task.

-reply by mayank singh

Comment/Reply (w/o sign-up)