Javascript 列突出显示-将CSS应用于所有<；td>；在给定条件下<；th>；

我想申请这个重点课程：

.highlight = { background-color: yellow }

所有

下的

或

---

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

您不能将

td

作为

th

的孩子，您可以这样标记您的表：

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

试试这个

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

var th=document.getElementsByTagName（'th'）[0]；
var td=th.getElementsByTagName（'td'）；
th.className='bg-highlight'；
对于（var i=0；i，我认为使用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;
            }
        }
    }
}

function（）{
var thl=document.getElementsByTagName（'th'）；
var trl=document.getElementsByTagName（'tr'）；
var类名；
对于（var i=0；iConfuses me
，在下面（所选列中）
@Mr Alien，我想它的意思是“突出显示列”是的，这就是我的意思。你能至少提供你的html结构吗？你能改变你的html吗？如果是的话，我会用cols创建一个colgroup，并在cols中设置类。如果可以的话，我会给出一个答案。嗨，你能把我的类包括在这里面吗？测试上面的答案，我对它做了更改。我想你误解了。我想突出显示一个co当事情变得复杂时，基于类的列（类），jquery是@AbramMy目标类排序的方式。我意识到作为th的孩子，没有td的问题。这是我的奋斗。感谢这个VAL，如果你能更新你的答案以反映我上面的类名，我会给你打勾。我已经根据你的新要求修改了Javascript。好吧，我不太清楚当然为什么这不起作用，但它不起作用。非常令人沮丧。你在JSFIDLE中实现了这一点吗？如果是，我将为你勾选它。它可能只是一个包装器，或者是由datatables插件创建的东西，这会把我弄得一团糟。如果添加了FIDLE，只需单击表中的任意位置即可
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;
            }
        }
    }
}

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