how to set left of a div positioned absolute in relative to table cell "td"?-CodePudding

I need to cover number of table cells based on the given cell index. let's assume we have table with 5 cells each row.

If i gave the cell index number 3 that means cells from 0 to 3 should be covered.

here is some code (html, css, js)

const table = document.querySelector('table');
var rows = table.rows;
var chosenCell = (rowIndex, cellIndex) => {
  var cell = rows[rowIndex].cells[cellIndex];      
  var msg = rows[rowIndex].cells[0].children[0];
  msg.className = "msg";
  msg.style.right = cell.style.right;
}

tr{
  position: relative;
}
.msg{
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  background-color: green;
}
.hidden{
  visibility: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<table >
    <tr>
      <th scope="col">F#</th>
      <th scope="col">Second</th>
      <th scope="col">Third</th>
      <th scope="col">Forth</th>
      <th scope="col">Fifth</th>
      <th scope="col">Last</th>
    </tr>
    <tr>
      <th scope="row" >row 1 <div ><div></th>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
    </tr>
    <tr>
      <th scope="row" >row 2 <div ><div></th>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
    </tr>
    <tr>
      <th scope="row" >row 3 <div >My target is to cover until cell 3</div> </th>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
    </tr>    
</table>
<button  onClick="chosenCell(3, 3)"> Do It @ row 3 and cell 3</button>

how to expand div starting from the beginning of the row until cell 3

CodePudding user response：

The issue in your logic is due to how you're calculating the position of cells. You need to get the left position of the starting cell, and the right position of the ending cell, as well as their heights. Once you have these values you can apply them to the msg and show it:

const table = document.querySelector('table');
const rows = table.rows;

document.querySelector('.btn').addEventListener('click', e => {
  let rowIndex = e.target.dataset.row;
  let colIndex = e.target.dataset.col;
  let row = rows[rowIndex];
  
  let cellStart = row.cells[0];
  let cellEnd = row.cells[colIndex];

  let msg = cellStart.children[0];
  msg.style.height = cellStart.offsetHeight   'px';
  msg.style.left = cellStart.offsetLeft;
  msg.style.width = cellEnd.offsetLeft   cellEnd.offsetWidth   'px';
  msg.classList.remove('hidden');
});

tr {
  position: relative;
}

.msg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: green;
}

.hidden {
  visibility: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<table >
  <tr>
    <th scope="col">F#</th>
    <th scope="col">Second</th>
    <th scope="col">Third</th>
    <th scope="col">Forth</th>
    <th scope="col">Fifth</th>
    <th scope="col">Last</th>
  </tr>
  <tr>
    <th scope="row">row 1
      <div ></div>
    </th>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    <td>cell 4</td>
    <td>cell 5</td>
  </tr>
  <tr>
    <th scope="row">row 2
      <div ></div>
    </th>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    <td>cell 4</td>
    <td>cell 5</td>
  </tr>
  <tr>
    <th scope="row">
      row 3
      <div >My target is to cover until cell 3</div>
    </th>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    <td>cell 4</td>
    <td>cell 5</td>
  </tr>
</table>
<button  data-row="3" data-col="3"> Do It @ row 3 and cell 3</button>