单击时突出显示表格列
用我的表格,用户可以对结果进行升序和降序排序。我需要把它放到这里,当他们点击标题按钮对该列进行排序时,它会更改所有列的背景(直接在该标题列的下面)以更改背景颜色...以下是我的代码: 这里是在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>
这里的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 <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 <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 <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 <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'] : '–';
$sold_price = (is_numeric($a['sold_price'])) ? '$'.$a['sold_price'] : '–';
$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>
我一直在使用一个插件尝试过,但是这是没有用,因为我从数据库中有PHP抓取内容,并直接将其送到表。注意:当PHP从数据库中获取内容时,它将表格中的行的颜色从白色变为蓝色。
任何和所有的帮助,非常感谢。
我会分配每<td>
和<th>
a data-column
属性指示它是哪一列。然后点击<th>
,抓住标题的data-column
属性,并使用jQuery(或类似的库)更改所有表格单元格的颜色,该属性值为data-column
。
示例表格标记:
<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>
实例的jQuery:
$('body').on('click', '#table th', function(){
// Grab the column number
var column = $(this).attr('data-column');
// Reset any highlighted columns
$('#table td').removeClass('highlighted');
// Set all columns with the same column number to have the highlight class
$('#table td[data-column='+column+']').addClass('highlighted');
})
希望这有助于!
最佳, 安德鲁
我怎么能改变这个不改变颜色的标题列,但只有它下面的列? @Andrew –
@PixelReaper只要不把'data-column'属性放在'thead'部分的ths中。 –
我只是在想,但这种方式不会工作。表格行是在foreach()中设置的,它设置了一个class =“even”来更改每隔一行的背景,因此无法在递增值中添加data-column =“”。 @Sébastien –
您应该能够使用jQuery做到这一点很容易地使用.index()
和:eq()
,而无需改变你的当前HTML。
当您单击做排序,万事俱备后,抢点击<th>
行中使用这个位置:
var colNum = $(this).parent().children().index($(this));
。 。 。不过,这是假定点击事件本身绑定到<th>
。如果它是依赖于一个较低的水平元素,你就必须修改代码一点点,这样的:
var parentTH = $(this).closest("th");
var colNum = parentTH.parent().children().index(parentTH);
一旦你的行中的<th>
的指数,则可以选择所有该<td>
标记,在他们行的相同位置,像这样的:
var selectedColCells = $("#bin tr").find("td:eq(" + colNum + ")");
一旦你拥有了这些,你可以添加一个类或直接更改样式为每一个(我推荐使用一类:))。您还需要每次清除表格中所有<td>
标签的类/样式,以便重置为默认的“未排序”外观。注意,如果您在表格中使用了<colgroup>
,而在每列中使用<col>
,则可以使用相同的逻辑,但只需使用类/样式更新所选的<col>
,而不是每个<td>
列中。
编辑:在点击事件绑定到低于<th>
级别的元素时,修复了查找“colNum”值的逻辑中的一个小问题。
我并不完全遵循你所说的话。我更新了代码以包含将更多行添加到表中的foreach。您能否将您对我的代码所说的内容添加进去? @talemyn –
我的代码不是一种PHP方法,而是一种JQuery方法,旨在绑定到导致表被点击的点击事件。看看你的PHP代码,看起来你实际上是在你对数据进行排序时重新加载页面。真的吗?如果是这样,我需要修改我的答案。 – talemyn
Nope - 页面在一切排序后都不刷新。我还添加了CSS @talemyn –
那么你试过什么样的javascript? –
我一直在试图搞砸这个插件(例4)http://p.sohei.org/stuff/jquery/tablehover/demo/demo.html @JasonP –
[你检查了这个](http:///datatables.net/)? –