1

可能还有其他类似的帖子，但这里什么都没有。

我目前正在对现有网站进行修改，并且所需的一些更改涉及列和行突出显示，例如此处（教程/演示）。

由于有几个网页要浏览，我希望有某种快捷方式可以<colgroup></colgroup>像示例中那样动态添加，而不必table手动浏览每个页面。

我已经考虑过php's 的preg_replace功能，但我怀疑这是解决它的最简单方法。在最佳情况下，我将能够验证<colgroup></colgroup>每列是否存在现有数组。

4

1 回答 1

2

使用 jQuery，您可以<colgroup></colgroup>在突出显示脚本之前动态地将 预先添加到每个表中。就像是 -

if($("table > colgroup").length == 0){ // If the table does not have <colgroup></colgroup>

    var colCount = 0;
    $('tr:nth-child(1) td').each(function () { // Get the count of table columns
        if ($(this).attr('colspan')) { // if there is a <td colspan>
            colCount += +$(this).attr('colspan');
        } else {
            colCount++;
        }
    });


    var colgroupList = '';
    for (i=0;i<colCount;i++){ // Add a <colgroup></colgroup> for each <td>
        colgroupList += '<colgroup></colgroup>';
    }


    $("table").prepend(colgroupList);

}

$("table").delegate('td','mouseover mouseleave', function(e) {
 ...

jsFiddle 示例http://jsfiddle.net/BGR22/1/

编辑
如果页面上有多个表，则需要添加选择器以仅获取父表-

var $table = $(this).closest("table");

所以现在你$("table").delegate()看起来像

$("table").delegate('td','mouseover mouseleave', function(e) {
   var $table = $(this).closest("table");
   if (e.type == 'mouseover') {
     $(this).parent().addClass("hover");
     $table.children("colgroup").eq($(this).index()).addClass("hover");
   } else {
     $(this).parent().removeClass("hover");
     $table.children("colgroup").eq($(this).index()).removeClass("hover");
    }
});

更新了 jsFiddle - http://jsfiddle.net/BGR22/3/
和 3 个表格 - http://jsfiddle.net/BGR22/4/

于 2013-10-16T02:44:50.480 回答