Wie dynamisch eine neue Spalte in einer HTML-Tabelle hinzufügen

Question

ich eine Tabelle, auf die ich zur Zeit das Hinzufügen dynamisch Zeilen: http://jsfiddle.net/fmuW6/5/

Jetzt mit einem Klick ich möchte auch eine neue Spalte in der Tabelle hinzuzufügen eines Knopfes. Der Benutzer wird den Spaltenkopf in ein Textfeld eingeben.

Wie kann ich das erreichen? Wenn der Benutzer 4 Zeilen hinzufügt, sollte die Schaltfläche Add a new Column sich um alle vorhandenen Zeilen kümmern (Hinzufügen von Kontrollkästchen in jedem).

Update

Ich suche Spaltennamen und Checkbox auf Zeilenebene hinzuzufügen.

so habe ich das Textfeld, in dem hinzugefügt wird der Benutzer Eingabe des Spaltenname: http://jsfiddle.net/fmuW6/10/

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

so dann, wenn der Benutzer auf die Schaltfläche klickt der Spaltenname der Wert in der Textbox sein sollte und an der Reihe Ebene sollte Kontrollkästchen sein. Also im Grunde die neue Spalte sollte all tr in der Tabelle mit Ausnahme der ersten Zeile angehängt werden, da dies die Spaltennamen

Answer 1

Ich habe deine Geige mit einem kleinen Beispiel aktualisiert, wie du das machen könntest.

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

Dies würde eine neue Spalte in jeder Zeile, einschließlich einer Zählung-Variable hinzufügen, die auf der ersten Zeile, wie Namen und den Namen-Attribut der Kontrollkästchen auf den folgenden Zeilen angewendet wird.

Betrachten Sie th - Elemente für den Tabellenheader, auf diese Weise würden Sie nicht die Index-Prüfung, die ich mache, und es wäre semantisch korrekt.

Ich habe den Teil weggelassen, wo der Benutzer einen Namen für die Spalte eingeben würde, aber wie Sie sehen, können Sie einfach den iter - Wert durch den am Ende ersetzen.

Answer 2

Verwenden Sie diesen Code für das Hinzufügen neue Spalte:

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

Aber Sie müssen den Wert ändern für die erste Reihe mit einem Text und andere, um eine <input type="checkbox" /> einzuschließen. Und es ist besser,

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

Die Antwort funktioniert, aber immer noch hier ist ein alternativer Weg, wo wir thead und tbody verwenden!

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