javascript - 如何使用动态生成的行更改表(添加行跨度/列跨度)？

Question

我有一个从数据库中的数据自动创建的表。

var rows  = "";
    rows += "<tr class='row_primary'>";
        rows += "<td>COL 1</td>";
        rows += "<td>COL 2</td>";
        rows += "<td>COL 3</td>";
    rows += "</tr>";



    $.each(data.db_values, function(i, results){     //This is from database with n rows depend on n results
        rows += "<tr class='row_secondary'>";
            rows += "<td>COL 1</td>";
            rows += "<td>results.ID</td>";
            rows += "<td>COL 3</td>";
        rows += "</tr>";
    });

 $('#t_barang tbody').append(rows);

我的想法是在创建表后添加 rowspan。但是，它似乎无法正常工作。我尝试为 5 行表添加 $('#t_barang tbody tr').attr('rowspan', '5');。但是，它并没有改变表格。

当前结果:

COL1  COL2   COL3
COL1  DATA1  COL3
COL1  DATA2  COL3
COL1  DATA3  COL3
COL1  DATA4  COL3

预期结果:

       COL2   
       DATA1  
  COL1 DATA2 COL3
       DATA3  
       DATA4

Answer 1

我假设您已经知道第一次加载窗口时的数据库数据 length。所以你可以在将动态数据附加到 table 之前执行 rowspan，所以它在你的 js 中看起来像这样:

我假设您的数据库提供了 5 条数据:

database = [
        {id: 1},
        {id: 2},
        {id: 3},
        {id: 4},
        {id: 5},
    ];

然后你的行将像这样第一次声明:

var rows  = "";
rows += "<tr class='row_primary'>";
    rows += "<td rowspan="+(database.length+1)+">COL 1</td>";
    rows += "<td>COL 2</td>";
    rows += "<td rowspan="+(database.length+1)+">COL 3</td>";
rows += "</tr>";

rowspan 在这里根据你的数据库长度 + 1(对于你的表头)进行初始化。然后你可以像这样循环你的数据:

 $.each(database, function(i, results){ 
    rows += "<tr class='row_secondary'>";
        // rows += "<td>COL 1</td>";
        rows += "<td>"+results.id+"</td>";
        // rows += "<td>COL 3</td>";
    rows += "</tr>";
});

因为您已经初始化了rowspan，所以您不需要将COL 1 和COL 2 添加到行 ，所以我评论它。

郑重声明，我已经测试了这段代码并且运行良好，所以让我知道您还需要更多东西。