表上的 JQuery 选择器答案

【问题标题】：JQuery Selector on table表上的 JQuery 选择器
【发布时间】：2018-03-24 17:56:02
【问题描述】：

我想使用第一列中的数据为表格添加边框，如下所示：

此列中有行跨度。

我应该使用哪个选择器？

【问题讨论】：

见stackoverflow.com/help/how-to-ask, stackoverflow.com/help/mcve

标签： javascript jquery html-table selector

【解决方案1】：

这是一种获得所需输出的方法：

这使用 jQuery 根据 rowspan 属性计算行。

JS Fiddle

$('table.table td').each(function () {
    var rowspan = +$(this).attr('rowspan'),
    index = $(this).parent().index();
    if(rowspan) {
    // apply red top border to table row consisting of rowspan td 
        $('table.table tr:nth-child('+(index+1)+')').css('border-top', '2px solid red');

    // apply red bottom border to table row based on index and rowspan count 
    $('table.table tr:nth-child('+(index+rowspan)+')').css('border-bottom', '2px solid red');

    // for left and right borders, go through the rows from index upto the count of rowspan
    for(var i=index; i < index+rowspan; i++) {
        $('table.table tr:nth-child('+(i+1)+')').css('border-right', '2px solid red');
      $('table.table tr:nth-child('+(i+1)+')').css('border-left', '2px solid red');
    }
  }
});

如果此链接和方法适合您，请告诉我。

【讨论】：

我明天试试。谢谢你。

【解决方案2】：

在这里，您可以选择使用 jquery 将所有“子行”标记为一个类（以避免它们具有顶部边框）...

CSS

table { border-collapse: collapse; border-spacing: 0; border: 1px solid red; }
table tr:not(.subrow) { border-top: 1px solid red; }

JQUERY

$('table td[rowspan]').each(function() {
    var $row = $(this).closest('tr');
    for (var i=1, l=parseInt($(this).attr('rowspan')); i<l; i++)
        $row = $row.next().addClass('subrow');
});

还有一个小提琴的例子……https://fiddle.jshell.net/rigobauer/oq433521/

希望对你有帮助

【讨论】：