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

У меня есть таблица, к которой я в настоящее время динамически добавляю строки: 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>

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

Ответ 1

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

jsFiddle - Ссылка

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

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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

Современное чистое решение JavaScript:

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

Первая строка будет содержать th вместо td. Каждая новая ячейка содержит input. Не стесняйтесь изменить это в соответствии с вашими потребностями.