桌上的JQuery选择器

Question

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

此列中有rowspan。

我应该使用哪个选择器？

Answer 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');
    }
  }
});

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

Answer 2

这里有一个选项标记所有＆＃34; subrows＆＃34;与一个类（以避免它们有一个顶部边框）使用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/

我希望它有所帮助