How to dynamically add a new column to an HTML table

Question

I have a table to which I am currently dynamically adding rows: http://jsfiddle.net/fmuW6/5/

Now I\'d like to add a new column to the table as well with a click of a

Answer 1

I updated your fiddle with a small example how you could do that.

jsFiddle - Link

var myform = $('#myform'),
    iter = 0;

$('#btnAddCol').click(function () {
     myform.find('tr').each(function(){
         var trow = $(this);
         if(trow.index() === 0){
             trow.append('<td>Col+'iter+'</td>');
         }else{
             trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
         }
     });
     iter += 1;
});

This would add a new column to every row, including an count-variable that gets applied to the first row as name and to the name-attribute of the checkboxes on the following rows.

Consider using th - elements for the table header, that way you wouldn't need the index-check i'm making and it would be more semantically correct.

I left out the part where the user would put in a name for the column, but as you see, you could just replace the iter - value with that in the end.

Answer 2

The answer works, but still here is an alternative way where we use thead and tbody !

JS

$('#irow').click(function(){
if($('#row').val()){
    $('#mtable tbody').append($("#mtable tbody tr:last").clone());
    $('#mtable tbody tr:last :checkbox').attr('checked',false);
    $('#mtable tbody tr:last td:first').html($('#row').val());
}
});
$('#icol').click(function(){
if($('#col').val()){
    $('#mtable tr').append($("<td>"));
    $('#mtable thead tr>td:last').html($('#col').val());
    $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))});
}
});

Answer 3

Check it out jsFiddle ............................. http://jsfiddle.net/fmuW6/8/

 $(document).ready(function () {
        $('#btnAdd').click(function () {
              var count = 3, first_row = $('#Row2');
                while(count-- > 0)                    first_row.clone().appendTo('#blacklistgrid');
     });   

        $('#btnAddCol').click(function () {
            $("#blacklistgrid tr").each(function(){
               $(this).append("<td>test</td>");       
            })
     });      
 });

Answer 4

Modern pure JavaScript solution:

function addColumn() {
    [...document.querySelectorAll('#table tr')].forEach((row, i) => {
        const input = document.createElement("input")
        input.setAttribute('type', 'text')
        const cell = document.createElement(i ? "td" : "th")
        cell.appendChild(input)
        row.appendChild(cell)
    });
 }
 
 document.querySelector('button').onclick = addColumn

<table id="table">
  <tr><th><input type="text" value="test 1" /><th/></tr>
  <tr><td><input type="text" value="test 2" /><td/></tr>
</table>

<button type="button">add column</button>

First row will contain a th instead of td. Each new cell contains a input. Feel free to change this to suit your need.

Answer 5

Use this code for adding new column:

$('#btnAddCol').click(function () {
    $("tr").append("<td>New Column</td>");
});

But you need to change the value for the first row with a text and others to include a <input type="checkbox" />. And it is better to