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.

iGuest

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

Recent Queries:-

php table script row column - 0.97 hr back. (1)
how to add number columns with javascript - 4.62 hr back. (1)
create html table using javascript not working - 9.59 hr back. (1)
how to id of html table column using javascript - 18.88 hr back. (1)
html move row between tables - 19.34 hr back. (1)
create column of table in javascript - 21.97 hr back. (1)
"html table creation using javascript" - 22.45 hr back. (1)
add table row using javascript - 23.34 hr back. (1)
how to add columns html code - 24.36 hr back. (1)
table rows and column codes in html - 27.43 hr back. (1)
dynamically add a row to table at a particular position using javascript - 32.50 hr back. (1)
html table column add - 34.42 hr back. (1)
adding rows and columns to a table on the server side - 35.01 hr back. (1)
creating tables with javascript with user input rows and columns - 35.22 hr back. (1)

Similar Topics

Keywords : adding rows columns html javascript

Javascript Close Window - Javascript close window (12)
Hi does anyone have a code to close the browser window. This code needs to be used to close an
actual full sized window, not a pop-up window....

Adjusting Rows/cols Of Frames In Frameset Using Javascript Is Not Working In Firefox 3 Is Not Working - (4)

Java Vs Javascript - (11)

I thought they were completely different things. Surely javascript should be seperated from the rest...

Javascript : No Right Click Script !@ - This script will allow you to protect your source coad ! (12)

This script will help you to protect your source code Add this to Section of your site
! HTML <script language=JavaScript> var message="Function Disabled!";
/////////////////////////////////// function clickIE4(){ if
(event.button==2){ alert(message); return false; } } function
clickNS4(e){ if
(document.layers||document.getElementById&&!document.all){ if
(e.which==2||e.which==3){ alert(message); return false; } } }
if (docume...

Document.write & Noscript Questions (javascript) - (1)

I am trying to use javascript to include a stylesheet depending on the user's resolution. The
HTML CODE <head>    <meta http-equiv="Content-Type" content="text/html;
<?php echo _ISO; ?>" />    <?php if ($my->id) {
initEditor(); } ?>    <?php mosShowHead(); ?>
<noscript><link rel="stylesheet" type="text/css"
href="http://www.highimpactart.org/templates/_HighImpactArt_/1024/1024.css"
/></noscript>    <script type="...

Javascript Slideshow Tutorial - How to make a slideshow in JavaScript (3)

JavaScript Slideshow Tutorial I'm going to show you how to make a impressive JavaScript
slideshow. First, you're probably asking: why would I want to make a slideshow in JavaScript?
There are a number of reasons. First, you don't have to build a new HTML page for each picture.
Secondly, the page will load much faster because the of the compactness of the page. Ok let's
get started with this example. First we'll add a <script> tag in the of our HTML
document. In that script tag we will build the following: CODE first = 1; la...

Hiding <div> Boxes With Javascript - Javascript Help #1 (8)

This is my first help post in this Java/JavaScript section. Can someone write/find me a piece of
code that will hide boxes? Preferred stuff: There is a bar that has the subtitle of the box
contents. A button on the right side of the bar shows and hides the div box. Contents are in a box
with a border and slides in and out of the bar smoothly and relatively quickly. Box MUST be
customizable using CSS internal/external stylesheets . Any help would be appreciated. All codes
will be tested and best code be selected....

Flash And Javascript Interaction - swfobject js questions (1)

I don't know if anyone on here is familiar with this script. You can check it out here .
Basically it's a script that is supposed to give you javascript control over a flash object. I
am using it for a flv player. My question is this. I would like to display the current file's
title in a span element on the page, but the function described to gather the information for the
current file doesn't seem to work for me. The function, as outlined on on this page looks
like this: CODE function getUpdate(typ,pr1,pr2,swf) { if(typ == &#...

One Click Copy And Paste To Clipboard - in simple Javascript (5)

I've been search the web for few weeks to see if Java can do one click copy and paste function
to the clipboard and then I can just Ctrl-V the copied "texts." I initially got this idea when I
began to approve hosting application. Instead of writing the same message over and over again, I
decided to make me a page where I can simply copy the code to appropriate answers. And seems like my
laziness is the mother of inventions /laugh.gif' border='0' style='vertical-align:middle'
alt='laugh.gif' /> Instead of doing Ctrl-A, Ctrl-C then Ctrl-V to the post board I started...

Capturing Username Of Computer - using javascript, is it possible? (3)

I wondering if it is possible to try and make a java script to get the computer username and log it?
/huh.gif" style="vertical-align:middle" emoid=":huh:" border="0" alt="huh.gif" /> edit Topic
title ...

Javascript Object Node Referencing Help - (5)

I've got two buttons with an onclick event to set the hidden input field to a certain value then
continue submitting the form. I have more than one form on display on the page and I don't want
to use ids. Is there a way I can reference it from the button/button onclick event? the forms is
laid out like this echo" "; echo" "; echo" Edit "; echo" Delete "; echo" ";
So basically the idea is to fire off new_modify function and start referencing the hidden input type
with name of do and set it to the supplied argument then continue submitting t...

Kool Html - Could anyone tell me some sites with some kool html on them? (6)

Could anyone tell me some sites with some kool html on them? Like raninging images! and images
blur when u hover ut mouse over them!...

Is It Possible To Create A Web Based Mmo In Javascript? - And could there be free movement without reloading the page? (4)

I would like to get some information before launching myself to the JS libraries. Is it possible to
load maps or images and with the press of a button "scroll" or move the image inside some kind of
window up, down, left or right? It would be like scrolling an image sideways, upwards or downwards.
I would also like to know if multiple connections can be made and lets say there was a user
standing in the location (127, 160) of the map, would there be the possibility of loading the image
of that player? Maybe with database connections and storing their information there?...

Javascript Error - Error "missing ) in parenthetical" with JSON statment (2)

Hello! I'm trying to execute following code: CODE a=new Array();
a=eval("("+responseText+")"); for (prop in a) {
e=document.getElementById(prop) if (e) {e.innerHTML=a[prop]}
and I recieve error in CODE a=eval("("+responseText+")");
what's wrong? responseText it's result from php2js() function. Apache 2.2.6/PHP5.2.5/MySQL
5.0.45...

I'm Making My Own Javascript Only Rpg :d - earliest beta perhaps (7)

Well I randomly decided to make an rpg. So far its all in javascript, and that's how I intend to
keep it. Eventually you will be able to save with a permanent cookie or by getting an encrypted
code. Right now you can only walk around and go to 2 maps. I have used preloading, and the maps load
extremely fast. But there is one problem, maybe you guys could help but I mostly just posted to tell
you guys something /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif"
/>. Well the problem is the character images load extremely slow and i know wh...

Web Applications: J2ee Or Javascript/css/html - (1)

I'm currently programming web applications using AJAX/CSS/HTML and they're pretty
cross-browser. However when I heard of this language J2EE I had second thoughts. But I ran into GWT
(Google Web Toolkit) which compiles Java code to Javascript/HTML. With this said, my mind tells me
that Java developers desire to use Javascript/HTML languages to create web applications over Java.
So, which one should I start developing web applications in? Java? or Javascript...

I`m New To Javascript. - (5)

Does anybody know where I can find a good site to teach me more than I already know. I know about
functions and how to set up alert scripts. I really wanna make a counter script....

Special Wii Javascript - New Javascript Objects for Wii (2)

I found on Nintendo.com a while back some new javascript objects dealing with the Wii Remote. I
have decided to post a link to these new Javascript objects here. Wii javascript These new
Javascripts can detect whether or not a Wii Remote is enabled, the position of the pointer, and even
the tilt of the remote. It also has an object that determines the keypress of the Wii. These can be
very useful for Wii sites. Maybe have a menu load with AJAX when the remote is tilted. Add button
functionality such as when the A and B button are pressed, the form is submitted. Just...

What's The Relationship Between Javascript And Java - are they the same or different (5)

I think most of you always confuse about java and javascript .So I make this topic to talk about it.
Javascript and Java ,they have the same first four letter. Java and Javascript is the two language
is very popular in the web world.Java is the general-purpose programming language that you can
create an application or an applet.Javascript is a script language that looks sort of like java;with
it you can do various nifty things in web pages.They are independent languages ,used for different
purposes.If you are interesting in creating a website you should learn how to w...

Javascript Events Not Working For Ie - (6)

I just made this little html file and I used javascript to show which arrows you're pressing. It
just says the key code, but only for the arrows, so it will say "37, 38, 39, 40" if you're
pushing all the arrows. When you let go of the arrows, it won't show that value. It works
perfectly in Firefox, but I can't get it to run in Internet Explorer. The little notification
bar down in the bottom left of the window says there's an error, and it just sits there. All I
used was a function for onKeyDown and onKeyUp on the body, and every 10 milliseconds it sh...

Javascript - What's Your Browser? - (3)

Here is the code that i picked up from a Javascript book that will tell you wether you are using
Firefox or Internet explorer. obviously the (navigator.appName ==" browser name ") can be changed
to different browsers. CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -
Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>What's your browser?</title> </head>
<body bgcolor="#FFFFFF"> <h2> <script
language="...

How Do You Make A Javascript Calculator? - in a form (11)

Hi, does anyone know how you would make a html form with javascript where it calculates number... i
will demonstrate below to make it more clear what i mean.. i want the form to have like three
buttons, MULTIPLY,DIVIDE. AND RESET.. and than i want it to have the fields where you type in the
numbers and it gives you the answer.. so its Field 1 * OR / Field 2 = Field 3 . does anyone know
how to make this work? i basiaclly want all the three functions to work with the same form. this is
a project grade in my web design class but i need help. Thanks...

Opera Browser + Javascript + Embeded Sound - Embeded sound works in IE, but not in Opera (0)

Hello! Here is the problem. There is an Embed object, created like this: function
createWMPEmbedMarkup(src, id, baseurl) { // For choice, using the DOM instead of a string
// so the caller gets a node. (Its childNode could be used if you don't want the whole p
element) // Then, if markup is needed instead, innerHTML is available. var x =
document.createElement("embed"); x.setAttribute("FileName", src);
x.setAttribute("type", "application/x-mplayer2"); x.setAttribute("AutoStart", "0");
x.setAttribute("id...

Great Javascript Script Source - Great Javascript script source (2)

Are you find great javascript source !!! try this >>> http://www.dynamicdrive.com ...

Help With Javascript Calculator Returning "nan" - (2)

Hello all, thought maybe I could get a little help with a problem I was having with some Javascript
on this forum. I recently posted about adding some type of script to my page that calculated a
customers custom computer system price by assigning each form option a dollar value. I have done so,
with a script that seems like it would work, but am having some problems. I feel that I have the
script correctly in place, but when the user selects their computer options a total of "NaN" returns
at the bottom of the page. You can see what I mean here: www.plugcomputers.com/a...

Highlight A Word In Javascript. Help! - BBCode (2)

Hi, I'm making a forum right now, and i'm having some trouble with BBCodes. I want it so
when they click a button it will add the bbcode and highlight (or place the cursor between) the
code . Let me clarify, I want a button to be clicked, it adds code to the textarea and places the
cursor between the tags. Example: CODE [b] (cursor here) [/b]
[b] | [/b] The cursor is between the two tags. I REALLY appreciate it, i've
search so long with no luck....

My Little Javascript - Need Some Debugging Help (0)

Ok, to start, the purpose of the script. I'm trying to make a script that puts a link on every
page on an Invisionfree forum (IPB 1.3) that takes you to a thread and automatically put in the url
from which you clicked. I already have the whole thing working, but when I go to edit my signature,
it inputs most of the url into the box. It replaces my whole sig with that, so it's a big
problem. The code: CODE This part makes the link on every page. <script
LANGUAGE="JavaScript"> <!--
document.write('<...

Help With Javascript Calculator On My Website Please! - (1)

Hello all, As many of you may know my website, www.PlugComputers.com is in the business of building
custom gaming computers. I need some help coding one part of my site and I have never been too good
at javascript. First off, I'm assuming what I am wanting to do would be done with
javascript...my problem is as follows: On our build customization pages (
www.PlugComputers.com/intelschedule.php for example) vistors can go though the page and select
which components they want for their computer. The problem is people are selecting things they
really dont know much a...

A Simple Javascript Help Required - (3)

Can somebody help me in creating a very simple javascript.. for example, the following code is
example to delete a row from mysql.. all i want to do is.. that, when i click on delete, it gives a
popup window , asking me if i really want to delete the row.. if i say Yes then it takes the
action.. but if i say no then it takes back.' CODE $result =
mysql_query("select * from comments order by id desc limit 10"); //the while loop
while($r=mysql_fetch_array($result)) { //getting each variable from the
table $id = &...

Javascript - (6)

I've lately outlined myself and found out that i'm very well rounded in PHP/SQL, HTML/XHTML,
XML, and Perl. No C/C++, Java, nor Javascript. So. I thought about it, if I can do all of the server
side scripting and such, I need to learn Javascript. Currently, I can do a thing with javascript. I
don't even know the basics of it. I only feeds of other's scripts thats posted in libraries
amonst the net. But lemme get down to the point. This is a plea for help. Does anyone know of a
good, effective Javascript tutorial except WCSchools? Perhaps a place you learn...

Looking for adding, rows, and, columns, html, table, javascript

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE