Как динамически добавлять значения столбца заголовка таблицы и значения ячеек таблицы

Question

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

Вот скрипка..

скрипка

Пожалуйста, помогите мне..

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/