Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Adding Rows & Columns In Html Table Using Javascript
Inspiron
post Mar 15 2006, 06:59 PM
Post #1


Trap Grand Marshal Member
***********

Group: Members
Posts: 1,203
Joined: 25-March 05
Member No.: 4,883
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">
                    <!-- 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.

(list)

Go to the top of the page
 
+Quote Post
iGuest
post Jul 7 2008, 08:23 PM
Post #2


Hail Caesar!
*********************

Group: Members
Posts: 5,876
Joined: 21-September 07
Member No.: 50,369
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

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · Java, Java Servlets, Java Script, & JSP · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Javascript Slideshow Tutorial(4)
  2. Javascript Close Window(15)
  3. One Click Copy And Paste To Clipboard(5)
  4. I'm Making My Own Javascript Only Rpg :d(7)
  5. What's The Relationship Between Javascript And Java(5)
  6. Javascript : No Right Click Script !@(12)
  7. Hiding <div> Boxes With Javascript(8)
  8. My Little Javascript(0)
  9. Highlight A Word In Javascript. Help!(2)
  10. How Do You Make A Javascript Calculator?(11)
  11. Help With Javascript Calculator Returning "nan"(2)
  12. Great Javascript Script Source(2)
  13. Web Applications: J2ee Or Javascript/css/html(1)
  14. Opera Browser + Javascript + Embeded Sound(0)
  15. Javascript - What's Your Browser?(3)
  1. Javascript Events Not Working For Ie(6)
  2. I`m New To Javascript.(5)
  3. Special Wii Javascript(2)
  4. Javascript Error(2)
  5. Is It Possible To Create A Web Based Mmo In Javascript?(4)
  6. Kool Html(6)
  7. Capturing Username Of Computer(3)
  8. Javascript Object Node Referencing Help(5)
  9. Flash And Javascript Interaction(1)
  10. Document.write & Noscript Questions (javascript)(1)
  11. Java Vs Javascript(11)
  12. Adjusting Rows/cols Of Frames In Frameset Using Javascript Is Not Working In Firefox 3 Is Not Working(4)
  13. Need Help With Javascript Drag And Drop Script(2)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 13th October 2008 - 11:40 PM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation