Question

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

我目前正在重新处理现有网站，并且所需的一些更改涉及列和行突出显示，例如此处（tutorial / demo）。

由于有几个网页需要通过，我希望有一些快捷方式来动态添加<colgroup></colgroup>，就像在示例中一样，无需手动浏览每个页面和table。

我已经考虑了php的{{1}}功能，但我怀疑这是解决问题的最简单方法。在最佳方案中，我将能够验证每列是否存在现有preg_replace数组。

Answer 1

使用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/

为每个表列添加colgroup

1 个答案: