Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
How can I add rows to a table with this structure using javascript?
 
Basically I want to be able to click a button and have a new row created within the table for each of the columns used below. So for instance, it could be name: new book, quantity:30 etc.
 
<table id="dynamictable">
              <tbody>
                <tr>
                  <td class="name">My Favorite book</td>
                  <td class="quantity">x 20</td>
                  <td class="unit_price">£8.99</td>
                  <td class="total">£179.80</td>
                  <td class="remove"><img src="image/cross.png"></td>
                </tr>
               </tbody>
            </table>
Posted 4-Mar-13 4:47am
Edited 4-Mar-13 5:00am
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Using jQuery you can easily add rows like below
$('#buttonId').click(function()
{
string htmlRow="<tr><td class="name">My Favorite book2</td></tr></tbody></table><table><tbody><tr><td class="quantity">x 20</td></tr></tbody></table><table><tbody><tr><td class="unit_price">£8.99</td></tr></tbody></table><table><tbody><tr><td class="total">£179.80</td></tr></tbody></table><table><tbody><tr><td class="remove"><img src="image/cross.png"></img></td></tr>";
$('#dynamictable>tbody').append(htmlRow);
}
 
Hope this helps
  Permalink  
v2
Comments
Andrews Smith at 4-Mar-13 12:09pm
   
That wouldn't work. Just came up with this instead...
 

 
My Favorite book x 20 £8.99 £179.80 $('#buttonId').click(function() { string htmlRow="My Favorite book2
x 20
£8.99
£179.80
"; $('#dynamictable>tbody').append(htmlRow); }
Andrews Smith at 4-Mar-13 12:09pm
   
My code looks like this using your example above:
 
<table id="dynamictable">
<tbody>
<tr>
<td class="name">My Favorite book</td>
<td class="quantity">x 20</td>
<td class="unit_price">£8.99</td>
<td class="total">£179.80</td>
<td class="remove">
<img src="image/cross.png">
</td>
</tr>
</tbody>
</table>

$('#buttonId').click(function()
{
string htmlRow="<tr><td class="name">My Favorite book2</td></tr><table><tbody><tr><td class="quantity">x 20</td></tr></tbody></table><table><tbody><tr><td class="unit_price">£8.99</td></tr></tbody></table><table><tbody><tr><td class="total">£179.80</td></tr></tbody></table><table><tbody><tr><td class="remove"><img src="image/cross.png"></img></td></tr>";
$('#dynamictable>tbody').append(htmlRow);
}
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

The strategy is to first get the element ID you want to append to, then create a new row element with the new data, and then append that element to the ID you got in step 1.
 
Perhaps something like this?
 
<pre lang="Javascript">var tableBody = document.getElementById('tableBody');
var newRow= document.createElement('tr');
newdiv.innerHTML = 'My Second Favorite Book';
tableBody.appendChild(newRow);</pre>
 

You'll need to give the tbody an id of 'tableBody'. You'll also then need to follow this strategy to add the td elements.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 230
1 PIEBALDconsult 150
2 DamithSL 125
3 Andreas Gieriet 90
4 Jochen Arndt 90
0 OriginalGriff 5,790
1 DamithSL 4,601
2 Maciej Los 4,012
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,195


Advertise | Privacy | Mobile
Web02 | 2.8.141220.1 | Last Updated 4 Mar 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100