Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Adding Rows & Columns In Html Table Using Javascript

Started by Inspiron, Mar 15 2006 06:59 PM

5 replies to this topic

#1 Inspiron

    Trap Grand Marshal Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,204 posts

Posted 15 March 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:
				 <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.

#2 iGuest

    Hail Caesar!

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,876 posts
  • Interests:Trap17 Free Web Hosting, No Ads

Posted 07 July 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...e_insertrow.Asp)
2- Use AJAX, which is more work but better performance.


-reply by Tarek

#3 spsarolkar

    Newbie [Level 1]

  • Kontributors
  • Pip
  • 10 posts
  • Gender:Male
  • Location:pune

Posted 24 January 2009 - 06:45 AM

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>

#4 iGuest

    Hail Caesar!

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,876 posts
  • Interests:Trap17 Free Web Hosting, No Ads

Posted 19 April 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

 


#5 iGuest

    Hail Caesar!

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,876 posts
  • Interests:Trap17 Free Web Hosting, No Ads

Posted 27 August 2009 - 06:59 AM

Adding Rows & Columns In Html Table Using JavascriptAdding 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

#6 iGuest

    Hail Caesar!

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,876 posts
  • Interests:Trap17 Free Web Hosting, No Ads

Posted 07 April 2010 - 05:10 AM

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
Back to Java, Java Servlets, Java Script, & JSP · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Discuss Anything
  2. → Main
  3. → Computers
  4. → Programming Languages
  5. → Java, Java Servlets, Java Script, & JSP
  6. Welcome - Start here! - Free Web Hosting