JSFiddle - React, Tailwind, and code Playground

by sarzin

HTML

<table><tbody><tr><td width="64">8"</td><td width="64">6"</td><td width="64">5"</td><td width="64">4"</td><td width="64">3"</td><td width="74">2"</td><td width="100">inch</td></tr><tr><td rowspan="2">76</td><td rowspan="2">69</td><td rowspan="2">48</td><td rowspan="2">27</td><td rowspan="2">20</td><td rowspan="2">11</td><td rowspan="2" width="100">A</td></tr></tbody></table>
<br>
<table><tbody><tr><td rowspan="2" width="110">Status</td><td width="110">time</td><td width="110">power</td><td rowspan="2" width="110">second status</td><td width="110">D</td></tr><tr><td>Time</td><td>( bar )</td><td>D1 </td></tr><tr><td>A</td><td>1</td><td>32</td><td>(B)</td><td>25</td></tr></tbody></table>

JavaScript

document.querySelectorAll("table").forEach(table => {
  let tr = table.getElementsByTagName("tr")[0];
  let td = tr.getElementsByTagName("td")[0];
  let rowspan = td.rowSpan ? td.rowSpan : 1;
  var nodes = document.querySelectorAll(`tbody tr:nth-child(-n+${rowspan})`);
  for (let i = 0; i < nodes.length; i++) {
    nodes[i].style.background = "#1DA6C0";
  }
});