Adding Rows & Columns In Html Table Using Javascript

Tags

This content has not been tagged yet

Options

Inspiron

Trap Grand Marshal Member

Group: Members
Posts: 1,203
Joined: 25-March 05
Member No.: 4,883

Post #1 post

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.

iGuest View Member Profile Hail Caesar! Group: Members Posts: 5,876 Joined: 21-September 07 Member No.: 50,369	Post #2 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

spsarolkar

Newbie [Level 1]

Group: Members
Posts: 10
Joined: 23-January 09
From: pune
Member No.: 76,049

Post #3

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>

iGuest

Hail Caesar!

Group: Members
Posts: 5,876
Joined: 21-September 07
Member No.: 50,369

Post #4 post

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

iGuest View Member Profile Hail Caesar! Group: Members Posts: 5,876 Joined: 21-September 07 Member No.: 50,369	Post #5 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

« Next Oldest · Java, Java Servlets, Java Script, & JSP · Next Newest »

Similar Topics

Topic Title	Replies	Topic Starter	Views	Last Action
PHP Programming ansi 2 html	1	illnet	6,158	20th June 2004 - 04:50 PM Last post by: ultrasmad
Software HTML Editors 123» 11	108	chelcy	83,266	18th September 2009 - 09:07 PM Last post by: domguan
Web Design Php/html Code Issue	3	-Sky-	626	12th June 2009 - 08:48 PM Last post by: -Sky-
Software Free Html Editor 123» 5	40	EricDrinkard	39,550	1st November 2009 - 01:34 PM Last post by: Www.AnthonyLazaroni.Com
HTML, XML etc.. How Can I Learn Html 12	11	football123213	8,606	30th July 2004 - 03:34 PM Last post by: templest
HTML, XML etc.. How To make Cool Inverted Table	7	SilverBoarder	14,235	9th February 2009 - 11:02 AM Last post by: aloKNsh
Java, Java Servlets, Java Script, & JSP Javascript resources? 12	10	Vacant	5,429	3rd June 2009 - 05:11 PM Last post by: proskiier23
HTML, XML etc.. where did you learn html from? 123» 13	125	djleli	40,362	5th November 2009 - 10:02 AM Last post by: Ho-oh'sRealm
Web Design Html Editors That Work With Asp Php 12	10	Saint_Michael	8,894	7th May 2009 - 07:13 AM Last post by: contactskn
Java, Java Servlets, Java Script, & JSP javascript sites wanted!! 12	10	holyium	9,940	25th September 2004 - 12:33 AM Last post by: spyshow
Web Design Php Or Html? 123» 6	54	habbovalley	3,841	5th November 2009 - 09:59 AM Last post by: Ho-oh'sRealm
Java, Java Servlets, Java Script, & JSP Javascript Problem	3	Vacant	7,836	26th August 2004 - 09:09 AM Last post by: Vacant
Trapper's Secret HideOut Adding Sub-domains	8	OpaQue	3,752	3rd September 2004 - 10:14 AM Last post by: zip_mc
HTML, XML etc.. Optimize Html Tables For Search Engines	0	deedee2003	3,718	5th September 2004 - 09:11 PM Last post by: deedee2003
Sports Table Foot Ball	2	wassie	4,678	10th September 2004 - 11:00 PM Last post by: Señor Maniac