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

我的想法是在创建表后添加行跨度。但是，它似乎无法正常工作。我尝试为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。因此您可以在将动态数据附加到rowspan之前执行table，因此在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（对于表头）的init。那么您可以像这样循环数据：

 $.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，所以我对此进行了评论。

为了记录，我已经测试了此代码并且运行良好，所以让我知道您还需要其他内容。

如何使用动态生成的行更改表（添加rowspan / colspan）？

1 个答案: