在具有行跨度和列跨度的表中为 TD 着色答案

【问题标题】：Color TD in tables with rowspan and colspan在具有行跨度和列跨度的表中为 TD 着色
【发布时间】：2017-02-21 03:36:50
【问题描述】：

我正在尝试为我的表格中的一些 TD 着色。但它不能按预期工作，因为它也会为其他 TD 着色。在这里，我尝试为第二个 TD 着色：

问题似乎是我正在使用 colspans 和 rowspans。

这是我的代码：

$("button").click(function() {
  $('table tr td:nth-child(2)').css("background-color", "red");
});

Here is a fiddle.

请注意，这是一个简化的示例。我的真实表更大更复杂。仅对包含B 和2 的所有单元格着色是不够的。

【问题讨论】：

如果我知道您想为所有第二列着色？如果是，则没有选择器，要知道哪一列是 TD 也不是那么简单。你必须做一个算法来计算你的 TD 的位置。
你想做什么？你想改变颜色交替列吗？ B 和它的行，D 和它的行，等等......不是吗？
@AlessandroMaglioccola 我正在尝试为列找到正确的选择器。在此示例中，我尝试为第二个 TD 着色，即 B 和 2。 4 被错误地着色。
请接受一个答案，这样这个问题就可以被认为已经解决了..！

标签： javascript jquery html css html-table

【解决方案1】：

$("button").click(function() {
  $('table>thead>tr>td:eq(1),table>tbody>tr>td:eq(1)').css("background-color",  "red");
});

希望这有帮助..

【讨论】：

这只适用于这个简单的例子。当我在底部添加另一行时，它将被忽略。

【解决方案2】：

如果我是正确的，这就是您要执行的操作：

使用<colgroup>标签：

HTML：

  <table border="1">
  <colgroup>
  <colgroup>
  <colgroup span="2">
  <colgroup>
  <tr>
    <th scope="colgroup">A</th>
    <th scope="colgroup">B</th>
    <th colspan="2"  scope="colgroup">C</th>
    <th scope="colgroup">D</th>
  </tr>
  <tr>
    <td rowspan="3">1</td>
    <td rowspan="3">2</td>
    <td rowspan="3">3</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>3</td>
    <td>4</td>
    <td>4</td>
  </tr>
</table>
<br>
<button class="col1">Col 1</button>
<button class="col2">Col 2</button>
<button class="col3">Col 3</button>
<button class="col4">Col 4</button>
<button class="reload">Reload</button>

JS：

$(".col1").click(function() {
$('colgroup:nth-child(1)').css("background-color", "red");
});

$(".col2").click(function() {
  $('colgroup:nth-child(2)').css("background-color", "red");
});

$(".col3").click(function() {
  $('colgroup:nth-child(3)').css("background-color", "red");
});

$(".col4").click(function() {
  $('colgroup:nth-child(4)').css("background-color", "red");
});

$(".reload").click(function() {
 location.reload();
});

COLGROUP 方法小提琴链接： https://jsfiddle.net/devqnyg5/11/

使用<col>标签：

HTML：

    <table border="1">
      <col>
      <col>
      <col>
      <col>
      <col> 
        <tr>
            <th>A</th>
            <th>B</th>
            <th colspan="2">C</th>
            <th>D</th>
        </tr>
        <tr>
            <td rowspan="3">1</td>
            <td rowspan="3">2</td>
            <td rowspan="3">3</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table><br>
    <button class="col1">Col 1</button> 
    <button class="col2">Col 2</button> 
    <button class="col3">Col 3</button> 
    <button class="col4">Col 4</button> 
    <button class="reload">Reload</button>

JS：

 $(".col1").click(function() {
  $('col:nth-child(1)').css("background-color", "red");
});

$(".col2").click(function() {
  $('col:nth-child(2)').css("background-color", "red");
});

$(".col3").click(function() {
  $('col:nth-child(3),col:nth-child(4)').css("background-color", "red");
});

$(".col4").click(function() {
  $('col:nth-child(5)').css("background-color", "red");
});

$(".reload").click(function() {
 location.reload();
});

COL 方法小提琴链接： https://jsfiddle.net/devqnyg5/9/

【讨论】：

这只适用于这个简单的例子。当我在底部添加另一行时，它将被忽略。
是的...正在努力...很快就会通知您..！
更新了帖子...！此外，如果您正在寻找一种动态方式，那么我现在想到的方式是使用此 PHP API 编写动态 js 代码：simplehtmldom.sourceforge.net
用两种方法更新了帖子......使用你感觉更好的任何东西......！ :D :P 享受..！

【解决方案3】：

检查它是否不包含 col-span：

$('table tr td:nth-child(2):not([col-span]), table tr td:nth-child(2):not([row-span])')

【讨论】：

我没有帮助。