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或th：

添加样式

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

Answer 2

试试这个，

<强> CSS

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

<强> SCRIPT

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;
            }
        }
    }
}

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

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

然而如果您可以更改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）应用

demo

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

3 个答案: