javascript - 列突出显示 - 将 CSS 应用于给定下的所有内容

Question

我想申请这个亮点课程：

.highlight = { background-color: yellow }

对所有人<td>下一个<th class = "sorting_desc">或<th class = "sorting_asc">

Javascript 解决方案是可以接受的。

Answer 1

你不能td作为 的孩子th，你可以像这样标记你的表：

<table id="mytable">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

td并设置您的or样式th：

#mytable th { background: red; }
#mytable td { background: yellow; }

Answer 2

尝试这个，

CSS

.bg-highlight{background:yellow;}
.bg-columns{color:red;}

脚本

var th=document.getElementsByTagName('th')[0];
var td=th.getElementsByTagName('td');
th.className='bg-highlight';
for(var i=0;i<td.length;i++)
{
    td[i].style.background='red';
    // Or try applying classes in it
    //td[i].className='bg-columns';
}

Answer 3

我不认为使用 CSS 和你的标记是可行的。

你可以用 Javascript 做到这一点：

function(){
    var thl=document.getElementsByTagName('th');
    var trl=document.getElementsByTagName('tr');
    var classname;
    for(var i=0;i<thl.length;i++)
    {
        var th=thl[i];
        if (th.className == 'sorting-desc') {
              classname = 'highlight';
        } else if (th.className == 'sorting-asc') {
              classname = 'highlight';  
        } else {
              classname = '';
        }

        for(var j=0;j<trl.length;j++)
        {
            var tr=trl[j];
            var td=tr.cells[i];
            if (td) {
                td.className=classname;
            }
        }
    }
}

你会得到一个标题列表和一个行列表。对于标题中的每个 th，您决定应用哪个类，并在行之间进行循环，将与当前列号匹配的单元格设置为您决定的类。

当然你可以直接设置背景颜色，而不是设置一个类。

但是，如果您可以更改 HTML，我会做的是将 cols 和您想要的类设置为 col：

<table>
    <colgroup>
        <col class="asc">A</th>
        <col class="desc">D</th>
        <col class="aasc">A</th>
    </colgroup>
    <tr>
       <th>A</th>
       <th>D</th>
       <th>A</th>
    </tr>
    <tr>
       <td>A</th>
       <td>D</th>
       <td>A</th>
    </tr>

这样，您的 th 和 td 都将应用正确的类（asc 或 desc）

演示