Question

我想创建一个HTML表格，您可以在其中选择列，例如，当您将鼠标悬停在这些列上时，它们会突出显示，并在您单击时重定向到新页面。（例如，单击第五列将转到column.aspx?col=5）。

麻烦的是，HTML表格按行工作：<tr><td>...</td></tr>

所以我在用浮动的<a>来表示列和子<span>来表示行，而不是使用table并实现所需的效果之间进行思考用jQuery。

哪个更好（以及为什么）？或者我应该考虑另一种解决方案吗？请指教。

Answer 1

我会使用现有的jQuery表解决方案，但如果您只想检测单击的列，可以执行以下操作：http://jsfiddle.net/rkw79/PagTJ/

$('table').delegate('td','click',function() {
    alert('column ' + $(this).index());
});

Answer 2

您可以通过 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
    });
}

UPDATE：将单元格索引和行索引分开并将主题保存为每个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"});
            });
    });
});

See the full-demo here at jsfiddle

Answer 3

如果您想使用jQuery执行此操作，可以使用:nth-child()-Selector选择列中的所有<td />（假设您没有<td />跨越多列）。

有关在表格的第二列定位onyl的示例，请参阅this fiddle。

Javascript方法的缺点是，它需要启用Javascript（呃！）。

Answer 4

我认为这取决于您的目标市场。如果您可以使用JavaScript而不必担心没有它的用户那么是，那么使用JavaScript的方法就是使用JavaScript。

此外，它将是最干净的，因为您不需要添加任何类型的HTML噪音。你只会遍历。

Answer 5

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

Answer 6

詹姆斯，这就是你所要求的。可以在包含表的任何页面上删除此代码以获得突出显示的列效果。我会使用这个解决方案，而不是创建我自己的自定义表格式结构，因为它与现有代码兼容，它允许表格数据显示在它所属的位置，并且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>

Answer 7

你可以像这样使用Javascript onclick事件：

<td onclick="window.location='column.aspd?col=5'">...</td>

或

<td onclick="myFunction(this)">...</td>

了解更多自定义功能。

我不知道您是否只想单击每列顶部的单元格，但如果要对整列执行此操作，则只能将此事件添加到列中的每个单元格。

Answer 8

e.g。你有以下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);
});

http://jsfiddle.net/jtDP8/4/

创建一个包含可单击列的HTML表

8 个答案: