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

Questions

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

December 14, 2022

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 class="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 class="msg"><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 class="msg"><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 class="msg hidden">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 class="btn btn-primary" 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

>Solution :

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 class="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 class="msg"></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 class="msg"></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 class="msg hidden">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 class="btn btn-primary" data-row="3" data-col="3"> Do It @ row 3 and cell 3</button>