创建具有可单击列的 HTML 表格

Question

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

问题是，HTML 表格按行工作： ...

所以我正在考虑使用浮动 来实现这一点 表示列，子 表示行，与使用 table 并实现所需效果相比使用 jQuery。

哪个会更好（以及为什么）？或者我应该考虑其他解决方案？请指教。

Answer 1

如果您想使用 jQuery 执行此操作，则可以使用 -selector/" rel="nofollow">:nth-child()-Selector （假设您没有 跨越多于一列）。

有关仅定位表格第二列的示例，请参阅此小提琴。

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

Answer 2

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

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

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

或

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

获得更多自定义功能。

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

Answer 4

例如，您有以下 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/

Answer 5

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

在 jsfiddle 上查看完整演示

Answer 6

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

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

Answer 7

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

而且它将是最干净的，因为您不需要向其中添加任何类型的 HTML 噪音。你只需穿越。

Answer 8

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