html中的动态行跨度答案

【问题标题】：dynamic rowspan in htmlhtml中的动态行跨度
【发布时间】：2021-06-05 19:15:34
【问题描述】：

我有下面的 html 代码，我想将其行跨度设置为等于 for 循环中的数据长度。我对 html 了解不多，所以请你给我提供一行动态设置行跨度的代码。

 <td style="border:1px solid rgb(0,0,0);overflow:hidden;padding:2px 3px;vertical-align:middle;background-color:rgb(111,168,220);font-weight:bold;white-space:normal;text-align:center" rowspan="2" colspan="1">
                              <div style="max-height:65px">Tasks for Today</div>
                           </td>
                           <td style="border-width:1px;border-style:solid;border-color:rgb(0,0,0) rgb(0,0,0) rgb(0,0,0) rgb(204,204,204);overflow:hidden;padding:2px 3px;vertical-align:top;background-color:rgb(111,168,220);font-weight:bold;text-align:center">Task</td>
                          <? for(var i = 0; i < data.length; i++) { ?>
                           <td style="border-width:1px;border-style:solid;border-color:rgb(0,0,0) rgb(0,0,0) rgb(0,0,0) rgb(204,204,204);overflow:hidden;padding:2px 3px;vertical-align:top;background-color:rgb(111,168,220);font-weight:bold;text-align:center"><?=data[i].task?>.</td>
                            <? } ?>

【问题讨论】：

你想用javascript制作表格吗？取决于数据数组。
我从 JavaScript 函数评估它并从那里传递数据数组。我希望行跨度等于数组的长度。
这看起来像 PHP 与 JavaScript 混合在一起
我不知道 for 循环对我有用，但我只需要更改行跨度。

标签： javascript html dynamic html-table

【解决方案1】：

您可以尝试使用 Javascript Jquery：

let dataSet=[{emp:"Palash",address:'address 1'},{emp:"Kanti",address:'address 2'},{emp:"Bachar",address:'address 2'}];

let tableTr="";
dataSet.map((r,index)=>{
    if(index==0){
      tableTr=tableTr+`<tr>
                          <td rowspan="${dataSet.length}">Company Title </td>
                          <td>${r.emp}</td>
                          <td>${r.address}</td>
                      </r>`;
    }else{
    tableTr=tableTr+`<tr>
                          <td>${r.emp}</td>
                          <td>${r.address}</td>
                      </tr>`
    }

});

 $('#table tbody').append(tableTr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" border="1">
<thead>
<th>Company Name </th>
<th>EMP Name </th>
<th>Address </th>
</thead>
<tbody>

</tbody>
</table>

【讨论】：