html 中的动态行跨度

Question

I have below html code and I iwant to set its rowspan equal to the length of data as in for loop. I dont have much knowledge about html so can you please provide me with one line of code which sets rowspan dynamically.

 <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> <? }?>

Answer 1

You can try using 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>