Question

我有一个表格，其中包含一个名为header的固定标题。现在，我必须在标题下添加10个值到表格的单元格中。这意味着此时行数将为10，我关心的是如何为除标题之外的行添加列单元格，这应该完成动态。因为表标题列中的值的数量可以根据要求进行更改。

这是小提琴......

Fiddle

请帮帮我..

Answer 1

我更新了你。

FIDDLE

  $(function () {
    $("button").click(function (e) {
        var cols = $(this).val();

        // You'll want to do something here to get the column data
        var dataRow;
        var dataCol;
        for (i = 0; i < cols; i++) {
            dataCol = $("<th>Col " + i + "</th>");
            $("#table table thead").append(dataCol);
            dataRow = $("<tr></tr>");
            for (j = 0; j < cols; j++) {
                dataRow.append($("<td>Row " + j + "</td>"));

            }
            $("#table table tbody").append(dataRow);
        }

        $("table").show();
        $("#clear").show();
        //$("#table table tbody").html("").append(data);
    });

    $("#clear").click(function () {
       $("table").hide();
        $(this).hide();
    });
});

Answer 2

检查下面的jsfiddle。这是你想要的方式吗？

$(function () {
$("button").click(function (e) {
    var cols = $(this).val();
    // You'll want to do something here to get the column data
    var data = $("<tr></tr>").append();
   for (i = 0; i < cols; i++) {
        $("#table table thead tr").after("<th>Column " + i +"</th>");
    data.append("<td>Col " +i+ "</td>");    
    }
    $("table").show();
    $("#clear").show();
    $("#table table tbody").html("").append(data);

});

$("#clear").click(function () {
   $("table").hide();
    $('table th:not(:first-child)').remove();
    $(this).hide();
});
});

http://jsfiddle.net/X6TZt/6/

如何动态添加表标题列值和表格单元格值

2 个答案: