Javascript 单击后，高亮显示表格列

使用my table，用户可以对结果进行升序和降序排序。我需要让它的地方，当他们点击标题按钮排序列，它改变了所有列的背景（正下方的标题列），以改变背景颜色。。。以下是我迄今为止的代码： 以下是CSS：

<style type="text/css">
.move_right {
    padding-left: 5px;
}
.center-text {
    padding-right: 5px;
}
.bottom_center_text {
    padding-left: 2px;
}
#nav_bottom {
    height: 0px; !important
}
#portfolio_header {
    Background-color: #5E90B3;
    color: white;
    border: 1px solid #CCCCCC;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 0px;
    padding: 10px;
}
table#bin, table#fallen, table#growth, table#turn { margin:10px 0; border:1px solid #ccc; }
th, td { padding:10px 7px; }
tr th { background:#ededed; color:#545454; font-weight:bold; cursor:pointer;}
#bin tr.even td { background:#e1eff1; }
#turn tr.even td { background:#f7f2d8; }
#fallen tr.even td { background:#f2dcbd; }
#growth tr.even td { background:#deefdc; }
td.title a { text-decoration:none; display:block; text-transform:uppercase; font-weight:bold;}
#bin td.title { background:#5198a0; }
#fallen td.title { background:#e6a850; }
#turn td.title { background:#ebd870; }
#growth td.title { background:#6ab065; }
#bin td.title a { color:#182c2e; font-size:13px;}
#fallen td.title a { color:#352713;  font-size:13px;}

#turn td.title a { color:#37321a;  font-size:13px; }
#growth td.title a { color:#233d21;  font-size:13px;}
hr { border:2px dotted #ccc; border-bottom:none; }
#tooltip { position:absolute; z-index:3000; border:1px solid #111; background-color:#eee; padding:5px; }
#tooltip h3, #tooltip div, #tooltip p { margin:0; }


/*#bin tr.even td.click, th.click,*/ td.click, th.click
{
    background-color: #000000;
}
/*#bin tr.even td.hover, tr.hover,*/ td.hover, tr.hover
{
    background-color: #CCC;
}
/*#bin tr.even th.hover, tfoot td.hover,*/ th.hover, tfoot td.hover
{
    background-color: ivory;
}
/*#bin tr.even td.hovercell, th.hovercell,*/ td.hovercell, th.hovercell
{
    background-color: #abc;
}
/*#bin tr.even td.hoverrow, th.hoverrow,*/ td.hoverrow, th.hoverrow
{
    background-color: #6df;
}
</style>

.向右移动{
左侧填充：5px；
}
.居中文本{
右侧填充：5px；
}
.底部\中心\文本{
左侧填充：2px；
}
#船底{
高度：0px；！重要
}
#组合头{
背景色：#5E90B3；
颜色：白色；
边框：1px实心#中交；
字体大小：粗体；
字体大小：14px；
边缘底部：0px；
填充：10px；
}
表#bin，表#fall，表#growth，表#turn{边距：10px 0；边框：1px solid#ccc；}
th，td{padding:10px 7px；}
tr{背景：#eded；颜色：#5454；字体大小：粗体；光标：指针；}
#bin tr.even td{背景：#e1eff1；}
#将tr.even td{background:#f7f2d8；}
#倒下的tr.even td{背景：#f2dcbd；}
#增长tr.even td{背景：#deefdc；}
td.title a{文本装饰：无；显示：块；文本转换：大写；字体重量：粗体；}
#bin td.title{背景：#5198a0；}
#下降的td.title{背景：#e6a850；}
#将td.title{背景：#ebd870；}
#增长td.title{背景：#6ab065；}
#bin td.title a{颜色：#182c2e；字体大小：13px；}
#标题a{颜色：352713；字体大小：13px；}
#打开td.title a{color:37321a；字体大小：13px；}
#growth td.title a{颜色：#233d21；字体大小：13px；}
hr{边框：2px点#ccc；边框底部：无；}
#工具提示{位置：绝对；z索引：3000；边框：1px实心#111；背景色：#eee；填充：5px；}
#工具提示h3，#工具提示div，#工具提示p{margin:0；}
/*#bin tr.even td.click，th.click，*/td.click，th.click
{
背景色：#000000；
}
/*#bin tr.even td.hover，tr.hover，*/td.hover，tr.hover
{
背景色：#CCC；
}
/*#bin tr.even th.hover，tfoot td.hover，*/th.hover，tfoot td.hover
{
背景颜色：象牙色；
}
/*#bin tr.偶数td.hovercell，th.hovercell，*/td.hovercell，th.hovercell
{
背景色：#abc；
}
/*#bin tr.偶数td.hoverrow，th.hoverrow，*/td.hoverrow，th.hoverrow
{
背景色：#6df；
}

以下是HTML：

        <table cellspacing="0" cellpadding="0" id="bin" width="100%">
        <thead>
            <tr>
                <th style="text-align:left; padding-top: 20px;" width="10%" title="Sort by Symbol" id="row-1" data-column="1">Symbol <img src="/images/sort-arrow-up.jpg" title="Sort by Symbol" alt="Sort by Symbol" class="sort-right move-left bottom-image" id="image1"/></th>
                <th style="text-align:left;" width="20%" title="Sort by Company Name" id="row-2" data-column="2">Company<br><span class="move_right">Name</span> <img src="/images/sort-arrow-up.jpg" title="Sort by Company Name" alt="Sort by Company Name" class="sort-right move-left" id="image2"/></th>
                <th style="text-align:center;" width="12%" title="Sort by Buy Date" id="row-3" data-column="3"><span class="center-text">Buy</span><br>Date <img title="Sort by Buy Date" src="/images/sort-arrow.jpg" alt="Sort by Buy Date" id="image3"/></th>
                <th style="text-align:center;" width="10%" title="Sort by Buy Price" id="row-4" data-column="4"><span class="center-text">Buy</span><br>Price &nbsp;<img title="Sort by Buy Price" src="/images/sort-arrow.jpg" alt="Sort by Buy Price" id="image4"/></th>
                <th style="text-align:center;" width="9%" title="Sort by Closed Price" id="row-5" data-column="5"><span class="center-text">Closed</span><br>Price &nbsp;<img title="Sort by Closed Price" src="/images/sort-arrow.jpg" alt="Sort by Closed Price" id="image5"/></th>
                <th style="text-align:center;" width="9%" title="Sort by Closed Date" id="row-6" data-column="6"><span class="center-text">Closed</span><br>Date &nbsp;<img title="Sort by Closed Date" src="/images/sort-arrow.jpg" alt="Sort by Closed Date" id="image6"/></th>
                <th style="text-align:center;" width="10%" title="Sort by Current Return" id="row-7" data-column="7"><span class="center-text">Total</span><br>Return &nbsp;<img title="Sort by Current Return" src="/images/sort-arrow.jpg" alt="Sort by Current Return" id="image7"/></th>
            </tr>
        </thead>
        <tbody>
<?php
    foreach($buylist as $a) {
        $bg = ($c % 2) ? ' class="even"' : '';
        $direction = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? 'up_green' : 'down_red';
        $tick = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? '<img src="/images/icon_up.gif">' : '<img src="/images/icon_down.gif">';
        $tick2 = (is_numeric($a['cchange']) && $a['cchange'] >= 0) ? '<img src="/images/icon_up.gif">' : '<img src="/images/icon_down.gif">';   
        $tick3 = (is_numeric($a['final_return_pct']) && $a['final_return_pct'] >= 0) ? '<img src="/images/icon_up.gif">' : '<img src="/images/icon_down.gif">'; 
        $type = '';
        $entry_price = (is_numeric($a['buyprice'])) ? '$'.$a['buyprice'] : '&ndash;';
        $sold_price = (is_numeric($a['sold_price'])) ? '$'.$a['sold_price'] : '&ndash;';
        $total_return= sprintf("%.02f", (($a['sold_price'] - $a['buyprice'])/$a['buyprice']) * 100);
?>
            <tr<?=$bg;?>>
                <td data-column="1"><b><a href="/gamechangers/getaquote/?symbolsearch=<?php echo $a['symbol']; ?>"><?=$a['symbol'];?></a></b><?=$type;?></td>
                <td data-column="2"><?=$a['name'];?></td>
                <td align="center" data-column="3"><?=$a['buydate'];?></td>
                <td align="center" data-column="4"><?=$entry_price;?></td>
                <td align="center" data-column="5"><?php echo $sold_price; ?></td>
                <td align="center" data-column="6"><?=$a['sold_date'];?></td>
                <td align="center" data-column="7"><?php echo $total_return; ?>%</td>
            </tr>
<?php
        $c++;
    }
?>
        </tbody>
    </table>

象征
公司名称
购买
日期
购买
价格
闭式
价格
关闭日期
日期
总
收益
我将为每个
和
分配一个
数据列
属性，指示它是哪一列。然后单击
，抓取标题的
数据列
属性，并使用jQuery（或类似库）更改具有该
数据列
属性的所有表格单元格的颜色

表标记示例：

<table id="table">
  <thead>
    <tr>
      <th data-column="1">Column 1</th>
      <th data-column="2">Column 2</th> // etc ....
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="1">contents</td>
      <td data-column="2">contents</td> // etc...
    </tr>
  </tbody>
</table>

希望这有帮助

最好的，
Andrew
使用JQuery，使用
.index（）
和
:eq（）
，您应该能够非常轻松地完成这项工作，而无需更改当前的HTML

单击进行排序时，在对所有内容进行排序后，使用以下命令获取行中单击的
的位置：

var colNum = $(this).parent().children().index($(this));

。不过，这是假设click事件绑定到
本身。如果它绑定到较低级别的元素，则必须稍微修改代码，如下所示：

var parentTH = $(this).closest("th");
var colNum = parentTH.parent().children().index(parentTH);

在该行中有
的索引后，您可以选择位于其行相同位置的所有
标记，如下所示：

var selectedColCells = $("#bin tr").find("td:eq(" + colNum + ")");

一旦你有了这些，你可以添加一个类或者直接为每个类修改样式（我建议使用一个类：）。您还需要每次清除表中所有
标记中的类/样式，以便将其重置为默认的“未排序”外观

另一方面，如果您在表中使用了一个
，每个列都有一个
，那么您可以使用相同的逻辑，但是您只需要使用类/样式更新所选的
，而不是列中的每个

编辑：修复了当点击事件绑定到
级别以下的元素时，查找“colNum”值的逻辑中的一个小问题。
那么您尝试了什么javascript？我一直试图搞乱这个插件（示例4）@JasonP？是的，但这会带来很多。。我们已经做了一张桌子，设计好了，什么都有。。（使用该插件无法与我们的PHP配合使用）@RCV如何更改此选项以不更改标题列的颜色，而仅更改标题列下方的列@Andrew@PixelReaper只是不要把
数据列
属性放在
thead
部分的ths上。我只是这么想，但这种方法不起作用。表行是在foreach（）中生成的，该foreach（）设置class=“偶数”以更改每一行的背景，因此无法在递增值中添加数据列=“偶数”@塞巴斯蒂安：我看不出这两件事有什么关联。你能不能修改foreach循环？解释起来很复杂，但不，我目前无法对它进行更改@塞巴斯蒂安：我没有完全听懂你的话。我对代码进行了更新，以包括在表中生成更多行的foreach。你能把你说的话加到我的密码里吗@TaleMy代码不是一种PHP方法，而是一种JQuery方法，旨在绑定到导致重新调用表的click事件。查看您的PHP代码，看起来您在对数据进行排序时实际上正在重新加载页面。这是真的吗？如果是这样的话，我需要修改我的答案。不，当所有内容都排序后，页面不会刷新。我还添加了CSS@talemynOh，那么您用来处理导致列排序的点击的JavaScript或JQuery代码在哪里呢。我看不到，这就是w
var selectedColCells = $("#bin tr").find("td:eq(" + colNum + ")");