Làm thế nào để tự động thêm một cột mới vào một bảng HTML

Question

Tôi có một bảng mà tôi hiện đang tự động thêm hàng: http://jsfiddle.net/fmuW6/5/

Bây giờ tôi muốn thêm một cột mới vào bảng cũng với một nhấp chuột của một nút. Người dùng sẽ nhập tiêu đề cột vào hộp văn bản.

Tôi làm cách nào để đạt được điều này? Nếu người dùng thêm 4 hàng, nút Add a new Column sẽ xử lý tất cả các hàng hiện có (thêm hộp kiểm trong mỗi hàng).

cập nhật

Tôi đang tìm để thêm tên cột và hộp kiểm ở cấp hàng.

vì vậy tôi đã thêm vào hộp văn bản trong đó người dùng sẽ nhập vào tên cột: http://jsfiddle.net/fmuW6/10/

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

như vậy thì khi người dùng nhấp chuột vào nút columnname nên giá trị trong textbox và ở hàng cấp phải là hộp kiểm. Vì vậy, về cơ bản các cột mới nên được nối vào tất cả tr trong bảng trừ dòng đầu tiên vì đó là tên cột

Answer 1

Tôi cập nhật fiddle của bạn với một ví dụ nhỏ như thế nào bạn có thể làm điều đó.

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

này sẽ thêm một cột mới vào mỗi hàng, trong đó có một số biến đó được áp dụng cho hàng đầu tiên như tên và tên thuộc tính của các hộp kiểm ở hàng sau.

Cân nhắc sử dụng th - các yếu tố cho tiêu đề bảng, theo cách đó bạn sẽ không cần kiểm tra chỉ mục tôi đang thực hiện và nó sẽ đúng ngữ nghĩa hơn.

Tôi đã bỏ qua phần mà người dùng sẽ đặt tên cho cột, nhưng như bạn thấy, bạn chỉ có thể thay thế giá trị iter - với giá trị đó ở cuối.

Answer 2

Sử dụng mã này để thêm cột mới:

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

Nhưng bạn cần phải thay đổi giá trị cho hàng đầu tiên với một văn bản và những người khác để bao gồm một <input type="checkbox" />. Và nó là tốt hơn để

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

Các công trình trả lời, nhưng vẫn ở đây là một cách thay thế mà chúng tôi sử dụng thead và 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">'))}); 
} 
});