css 如何将绝对位置div的左侧设置为相对于表格单元格“td”？

ztmd8pv5 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(150)

我需要根据给定的单元格索引覆盖表单元格的数量。让我们假设我们有5个单元格每行表。
如果我给出单元格索引号3，这意味着从0到3的单元格应该被覆盖。
下面是一些代码（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>

如何从行首开始扩展div直到单元格3

css

来源：https://stackoverflow.com/questions/74800519/how-to-set-left-of-a-div-positioned-absolute-in-relative-to-table-cell-td

1条答案

按热度按时间

2ic8powd1#

逻辑中的问题是由于计算单元格位置的方式。您需要获得起始单元格的左侧位置、结束单元格的右侧位置以及它们的高度。一旦获得这些值，就可以将它们应用于msg并显示它：

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>

赞(0）回复(0）举报 2022-12-15

我来回答

css 如何将绝对位置div的左侧设置为相对于表格单元格“td”？

1条答案

相关问题

热门标签

最新问答