Jak dynamicznie dodać nową kolumnę do tabeli HTML

Question

Mam tabeli, do której jestem obecnie dynamicznie dodanie rzędów: http://jsfiddle.net/fmuW6/5/

Teraz chciałbym dodać nową kolumnę do tabeli, jak również za pomocą kliknięcia przycisku. Użytkownik wprowadzi nagłówek kolumny w polu tekstowym.

Jak mogę to osiągnąć? Jeśli użytkownik doda 4 wiersze, przycisk Add a new Column powinien zająć się wszystkimi istniejącymi wierszami (dodając pole wyboru w każdym z nich).

aktualizacja

szukam dodać nazwę kolumny i wyboru na poziomie wiersza.

więc dodałem pole tekstowe, w którym użytkownik będzie wprowadzić nazwę kolumna: http://jsfiddle.net/fmuW6/10/

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

tak wtedy, gdy użytkownik kliknie przycisk NazwaKolumny powinna być wartość w polu tekstowym oraz w rzędzie poziom powinien być zaznaczony. Więc w zasadzie nowa kolumna powinna być dołączana do wszystkich tr w tabeli, z wyjątkiem pierwszego wiersza ponieważ jest to nazwy kolumn

Answer 1

Zaktualizowałem twoje skrzypce z małym przykładem, jak możesz to zrobić.

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

Byłoby dodać nową kolumnę do każdego wiersza, w tym count-zmiennej, która zostanie zastosowany do pierwszego rzędu, jak nazwa i nazwa-atrybutu pola wyboru w następujących wierszach.

Zastanów się, czy użyć elementów th - dla nagłówka tabeli, w ten sposób, że nie będziesz potrzebował sprawdzanego indeksu i byłoby to bardziej semantycznie poprawne.

Pominąłem część, w której użytkownik wstawił nazwę kolumny, ale jak widzisz, można po prostu zastąpić wartość iter - z tą na końcu.

Answer 2

użyć tego kodu do dodawania nowej kolumny:

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

Ale trzeba zmienić wartość w pierwszym wierszu z tekstem i innymi, które zawierają <input type="checkbox" />. I lepiej jest

Answer 3

Sprawdź to 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

Odpowiedź działa, ale nadal istnieje alternatywny sposób, w którym używamy thead i 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">'))}); 
} 
});