css 我怎样才能删除内容，并在表中给予背景

332nm8kg 于 2023-01-18 发布在其他

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

所以我想实现这个目标

以下是我目前所做的

$('.table tbody tr').each(function() {
                var tr = $(this);
                var th = tr.find('td:first-child').attr('class');
                var td = tr.find('td').attr('class');

                //the match box will be red, only the the td of row

                if (th == td) {
                    //important background red

                    tr.find('td').attr('style', 'background-color: red !important');

                }

            });

使用上面的脚本，我无法获得结果。以下是结果

这是我的html表格

<table class="table table-bordered table-auto text-center">
  <thead>
    <tr>
      <th>#</th>
      <th class="COL1">COL1</th>
      <th class="COL2">COL2</th>
      <th class="COL3">COL3</th>
      <th class="COL4">COL4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="COL1">COL1</td>
      <td>0 %</td>
      <td>13.5 %</td>
      <td>18.9 %</td>
      <td>5.4 %</td>
    </tr>
    <tr>
      <td class="COL2">COL2</td>
      <td>29.7 %</td>
      <td>0 %</td>
      <td>2.7 %</td>
      <td>0 %</td>
    </tr>
    <tr>
      <td class="COL3">COL3</td>
      <td>18.9 %</td>
      <td>8.1 %</td>
      <td>0 %</td>
      <td>2.7 %</td>
    </tr>
    <tr>
      <td class="COL4">COL4</td>
      <td>0 %</td>
      <td>0 %</td>
      <td>0 %</td>
      <td>0 %</td>
    </tr>
  </tbody>
</table>

那我该怎么做呢？先谢谢你了

css

来源：https://stackoverflow.com/questions/75154591/how-can-i-remove-content-and-give-background-in-table

1条答案

按热度按时间

gr8qqesn1#

迭代节点列表并检查其索引

给定一个表单元格的行索引i和列索引j，如果i===j，您希望将单元格背景更改为红色，对吗？
在下面的片段中，我这样做了：
1.选择所有表格行（即tr）
1.迭代表中的每一行，并选择它的所有子单元格（例如td）
1.将第i个索引的td单元格的背景色更改为红色。
HTML标记没有改变，但是添加了一些简单的CSS行，使它看起来更漂亮，即使表格的列和行数改变了，也应该可以工作。

const rows = document.querySelectorAll('tr');
rows.forEach((row, i) => {
  const children = row.querySelectorAll('td');
  return i === 0 ? null : children[i].style.background = "red";
});

th, td {
  padding: 10px;
}

th, td:first-of-type {
  background: #ddf;
}
td {
  background: #eee;
}
td:first-of-type {
}

<table class="table table-bordered table-auto text-center">
  <thead>
    <tr>
      <th>#</th>
      <th class="COL1">COL1</th>
      <th class="COL2">COL2</th>
      <th class="COL3">COL3</th>
      <th class="COL4">COL4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="COL1">COL1</td>
      <td>0 %</td>
      <td>13.5 %</td>
      <td>18.9 %</td>
      <td>5.4 %</td>
    </tr>
    <tr>
      <td class="COL2">COL2</td>
      <td>29.7 %</td>
      <td>0 %</td>
      <td>2.7 %</td>
      <td>0 %</td>
    </tr>
    <tr>
      <td class="COL3">COL3</td>
      <td>18.9 %</td>
      <td>8.1 %</td>
      <td>0 %</td>
      <td>2.7 %</td>
    </tr>
    <tr>
      <td class="COL4">COL4</td>
      <td>0 %</td>
      <td>0 %</td>
      <td>0 %</td>
      <td>0 %</td>
    </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2023-01-18

我来回答

css 我怎样才能删除内容，并在表中给予背景

1条答案

迭代节点列表并检查其索引

相关问题

热门标签

最新问答