如何使用动态生成的行更改表（添加行跨度/列跨度）？答案

【问题标题】：How to change table (adding rowspan/colspan) with dynamically generated rows?如何使用动态生成的行更改表（添加行跨度/列跨度）？
【发布时间】：2019-11-26 23:06:27
【问题描述】：

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

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

我的想法是在创建表后添加行跨度。但是，它似乎没有按应有的方式工作。我尝试为 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

【问题讨论】：

标签： javascript jquery html-table rows

【解决方案1】：

我假设你在第一次加载 windows 时就已经知道你的数据库数据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>";

这里的行跨度基于您的数据库长度 + 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 添加到 rows 中，所以我对其进行评论。

为了记录，我已经测试了这段代码并且运行良好，所以让我知道你需要更多的东西。

【讨论】：