Как динамически добавить новый столбец в таблице HTML

Question

У меня есть таблица, в которой я в настоящее время динамически добавлять строки: http://jsfiddle.net/fmuW6/5/

Теперь я хотел бы добавить новый столбец в таблице, а также с помощью щелчка кнопки. Пользователь вводит заголовок столбца в текстовое поле.

Как я могу это достичь? Если пользователь добавляет 4 строки, кнопка Add a new Column должна позаботиться обо всех существующих строках (добавив флажок в каждом из них).

обновление

Я ищу, чтобы добавить имя столбца и флажок на уровне строк.

поэтому я добавил текстовое поле, в котором пользователь будет вводить имя столбца: http://jsfiddle.net/fmuW6/10/

<input type=text placeholder='columnname'/> 
<button type="button" id="btnAddCol">Add new column</button></br></br> 

так тогда, когда пользователь нажимает на кнопку ColumnName должно быть значение в текстовом поле и в строке уровень должен быть флажками. Поэтому в основном новый столбец должен быть добавлен ко всему tr в таблице, за исключением первой строки, так что имена столбцов

Answer 1

Я обновил вашу скрипку небольшим примером того, как вы могли это сделать.

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; 
}); 

Это будет добавить новый столбец в каждой строке, в том числе счета-переменной, которая будет применяться к первой строке, как имя и имя-атрибута флажков на следующих строках.

Рассмотрите возможность использования th - элементов для заголовка таблицы, так что вам не понадобится проверка индекса, которую я делаю, и она будет более семантически корректной.

Я упустил часть, в которой пользователь поставил бы имя для столбца, но, как вы видите, вы можете просто заменить значение iter - значением в конце.

Answer 2

Используйте этот код для добавления нового столбца:

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

Но вам нужно изменить значение для первой строки с текстом и другими для включения <input type="checkbox" />. И это лучше

Answer 3

Проверьте это 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

Ответ работает, но все же здесь альтернативный способ использования thead и 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">'))}); 
} 
});