我想创建一个 HTML 表格，您可以在其中选择列，即当您将鼠标悬停在它们上方时它们会突出显示，当您单击它们时它们会重定向到新页面。 （例如，点击第五列会跳转到column.aspx?col=5）。
问题是，HTML 表格是按行工作的：<tr><td>...</td></tr>
所以我正在考虑使用浮动<a>s 来表示列和子<span>s 来表示行，与使用table 和使用jQuery 实现所需效果之间进行权衡。
哪个更好（为什么）？还是我应该考虑另一种解决方案？请指教。
【问题讨论】：
标签： jquery html css html-table css-float
您可以通过 jQuery 轻松地将 click 和 mouseover 事件绑定到每个 td。
$("table-selector tr td").each(function(){
$(this).click(function(){
// TODO with click
}).hover(function(){
// TODO with mouseover
},function(){
// TODO with mouseout
});
}
更新：将单元格索引和行索引分开并将主题保存为每个td的数据：
$("#myTable tr").each(function(r){
var row = r;
$("td", this).each(function(d){
var cell = d;
$(this)
.data("rowIndex", row)
.data("cellIndex", cell)
.click(function(){
$("#message").text("Row-Index is: " + $(this).data("rowIndex") +
" and Cell-Index is: " + $(this).data("cellIndex") );
})
.hover(
function(){
$(this).addClass("td-over").css({"text-align":"center"});
},function(){
$(this).removeClass("td-over").css({"text-align":"left"});
});
});
});
【讨论】：
我会使用现有的 jQuery 表格解决方案，但如果您只想检测点击的列，您可以这样做：http://jsfiddle.net/rkw79/PagTJ/
$('table').delegate('td','click',function() {
alert('column ' + $(this).index());
});
【讨论】：
我认为这在某种程度上取决于您的目标市场。如果您可以使用 JavaScript 而不必担心没有它的用户，那么可以，使用 JavaScript 的方法就是。
此外，它将是最干净的，因为您不需要向其添加任何类型的 HTML 噪音。您只需遍历即可。
【讨论】：
(1) 如果你说的是动态链接，那就是jQuery。
(2) 否则，我会全心全意支持您在 span 标签中使用锚链接的想法，并且只使用 CSS。
如果可以，请剪切 javascript。通过这种方式，您（通常）减少了加载时间，并覆盖了未启用 javascript 的用户（或浏览器过时的用户）。如果您可以为 ?col=1 到 ?col=5 创建链接，那么就这样做。这并不难。
--
如果您有很多列，另一种选择是在其中也加入一些 PHP 并运行一个 for 循环来输出链接标签中的所有数字：例如：
<?php
for($i=0;$i<200;$i++){
echo '<span><a href="?col=' . $i . '">link</a></span>';
}
?>
【讨论】：
如果您想使用 jQuery 执行此操作，您可以使用 :nth-child()-Selector 选择列中的所有 <td />s（假设您没有跨越超过一列的 <td />s）。
请参阅this fiddle，了解仅针对表格第二列的示例。
Javascript 方法的缺点是，它需要启用 Javascript（呵呵！）。
【讨论】：
詹姆斯，这就是你所要求的。可以将此代码放在任何带有表格的页面上以获得突出显示的列效果。我会使用这个解决方案而不是创建我自己的自定义表格结构，因为它与现有代码兼容，它允许表格数据显示在它所属的位置，并且 jQuery 只需几行代码即可完成所有繁重的工作.
<style type="text/css">
.columnhover {background-color: yellow;}
</style>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function($)
{
$('tr th,td').hover(function()
{
var columnNum = $(this).parent('tr').children().index($(this));
var $wholeColumn = $(this).parents('table').find('td:nth-child(' + (columnNum + 1) + ')');
$wholeColumn.addClass('columnhover');
},
function()
{
$('table').find('td').removeClass('columnhover');
});
$('tr th,td').click(function()
{
var columnNum = $(this).parent('tr').children().index($(this));
window.location = "test.html?column=" + (columnNum + 1);
});
});
/* ]]> */
</script>
【讨论】：
您可以像这样使用 Javascript onclick 事件：
<td onclick="window.location='column.aspd?col=5'">...</td>
或
<td onclick="myFunction(this)">...</td>
更多自定义功能。
我不知道您是否只想单击每列顶部的单元格，但如果您想针对整列执行此操作，您可以只将此事件添加到列中的每个单元格。
【讨论】：
例如你有以下html
<table>
<thead>
<td>1</td>
<td>2</td>
</thead>
<tbody>
<td>google</td>
<td>fb</td>
</tbody>
</table>
jquery
$("thead td").click(function(){
console.log($(this).index());
var index=$(this).index();
console.log("column.aspx?col="+(index+1));
//location.href="column.aspx?col="+(index+1);
});
【讨论】：