How to add new rows and column in table with predefined attribute?

Question

I am trying to add new row and column to my table using jQuery but on adding new rows and colums,css properties of table is missing i.e table border is not coming for newly added rows.here is my code:

   //Add new rows
     $('#btn3 li a:eq(0)').on('click', function (){

     var numcols = $('#tab1 tr:eq(0) td').length;
     var row = document.createElement('tr');

     //Insert name
     var name_td = document.createElement('td');
     row.appendChild(name_td);
     name_td.appendChild(document.createTextNode(name));

     //fill the rest with empty td's
     for (var i=1; i < numcols; i++) {
         row.appendChild(document.createElement('td'));
     }

     $('#tab1').append(row);
     }); 

   //Add new coloumn

   $('#btn3 li a:eq(1)').on("click", function (){
      $('#tab1').find('tr').each(function(){
        $(this).append('<td></td>');
        });
     });

Html code is here:

<table class="table table-bordered" id="tab1">
    <thead class="mbhead">
       <tr class="mbrow">
          <th></th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th>F</th>
          <th>G</th>
          <th>H</th>
          <th>I</th>
          <th>J</th>
          </tr>
   </thead>
<tbody>
   <tr>
     <td class="crow">1</td>
     <td>asd</td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td>ddd</td>
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr>
    <td class="crow">2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="crow">3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="crow">4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
 </tbody>

Please post the HTML code too. For me the css is working jsfiddle.net/Eu643/1 — palaѕн
– palaѕн, Commented Mar 4, 2013 at 12:12

Mark Schultheiss · Accepted Answer · 2013-03-04 13:31:20Z

1

The problem is your tr 0 is 0 length as it is a thead so you probably need:

var numcols = $('#tab1').find('thead th').length;

Here is a code sample (reworked a bit) http://jsfiddle.net/XdMqD/1/

Here is the code: NOTE: I did not have all your layout so I created a couple of buttons:

$('#btn3').on('click', function () {
    var name = "Feidrich";
    var numcols = $('#tab1').find('thead th').length;
    var row = $('<tr />');
    //Insert name
    var name_td = '<td >' + name + numcols + '</td>';
    row.append(name_td);
    //fill the rest with empty td's
    for (var i = 1; i < numcols; i++) {
        $('<td />').appendTo(row);
    }
    row.appendTo('#tab1');
});

//Add new coloumn

$('#btn4').on("click", function () {
    $('#tab1').find('tr').each(function () {
        $(this).append('<td>&nbsp;</td>');
    });
});

EDIT NOTE: I had no idea of your css so I used:

.table-bordered {
    border:solid lime 2px;
}
.table-bordered td {
    border:solid green 2px;
}

EDIT2: Fix up the column add - note I added a blank header - you can see that where you would want to something else likely:

$('#btn4').on("click", function () {
    $('#tab1').find('tr').eq(0).append('<th>&nbsp</th>')
    var mycontent = $('#tab1').find('tr:not(:eq(0))'); //.not(':eq(0)');
    mycontent.each(function () {
        $(this).append('<td>&nbsp;</td>');
    });
});

Updated fiddle with this: http://jsfiddle.net/XdMqD/2/

edited Mar 4, 2013 at 13:31

answered Mar 4, 2013 at 13:05

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amrendra Over a year ago

this is working bt when i add new column before adding rows.i m not getting border for newly added column.

Amrendra Over a year ago

check fiddle again.not working.first add few columns then rows.

Collectives™ on Stack Overflow

How to add new rows and column in table with predefined attribute?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related