前言：

tr行增加删除线，在纯css状态下，基本很难实现。因为tr这种标签，不能再包含除了td以外的dom元素。因此，只能通过相对定位或者偏移来实现元素的定位。

实现一共分了3步来完，不想看过程的直接拉到最下面：最终效果和完整代码

第一种方法：单表格-单线

取索引值；

做距离头部高度的相对偏移

弊端：无法满足表格多线问题。

css

.otoc-table-trHasLine tbody{ position: relative;}

.otoc-tr-line{

z-index: 999;

position: absolute;

height: 1px;

line-height: 1px;

border-top: 1px solid orange !important;

transform: rotate(0.5deg);

}

html

js

原理：利用相对定位，找到表格.otoc-table-trHasLine tbody 下tr里面含有tr-line的索引值，然后，改变它的top值。

$(function(){

//取值

var table_width = $(".otoc-table-trHasLine").width();

var thead_height = $(".otoc-table-trHasLine thead").height();

var tbody_tr_height = $(".otoc-table-trHasLine tbody tr").height();

//线与表格等宽

$(".otoc-tr-line").width(table_width)

//取到索引值

var this_tr_index = $(".tr-line").index(".otoc-table-trHasLine tbody tr");

this_tr_index = this_tr_index+1

alert(this_tr_index)

//改变top值 = 表格头高 + 个数 X 行高 - 半行高

line_top = thead_height+this_tr_index*tbody_tr_height-(tbody_tr_height/2)

//alert(line_top)

$(".otoc-tr-line").css("top",line_top)

})

第二种方法，单表格-多线

追加了跟表格相同数量的线型dom---》tbody中；

这里针对所有含tr-line的做了一个遍历；

弊端：无法满足多表格问题。

$(function(){

//取值

var table_width = $(".otoc-table-trHasLine").width();

var thead_height = $(".otoc-table-trHasLine thead").height();

var tbody_tr_height = $(".otoc-table-trHasLine tbody tr").height();

//追加跟tr相同数量的线dom

var tbody_tr = $(".otoc-table-trHasLine tbody tr")

for (var i=1;i<=tbody_tr.length;i++)

{

$(".otoc-table-trHasLine tbody").append('

}

//线与表格等宽

$(".div-tr-line").width(table_width)

//遍历含有.tr-line的表格行

for (var i=1;i<=tbody_tr.length;i++)

{

if ($("tr").eq(i).hasClass("tr-line"))

{

//取到索引值

var this_tr_index = $("tr").eq(i).index(".otoc-table-trHasLine tbody tr");

this_tr_index = this_tr_index+1

//改变top值 = 表格头高 + 个数 X 行高 - 半行高

line_top = thead_height+this_tr_index*tbody_tr_height-(tbody_tr_height/2)

$("#tr-line-"+i).css("top",line_top).show();

}

else{

console.log("不操作！")

}

}

})

第三种方法，多表格-多线

用了双层each()做每个表格的遍历；

然后给符合条件的offset

优点：完美实现了多表格-多线需求。

最终效果和完整代码：

tr多条线版本

.otoc-table-trHasLine tbody{ position: relative;}

.div-tr-line{

z-index: 999;

position: absolute;

height: 1px;

line-height: 1px;

border-top: 1px solid orange !important;

transform: rotate(0.0deg); /*倾斜度*/

display: none;

}

$(function(){

$('.otoc-table-trHasLine').each(function (t) { //t索引-相当与i

var self = $(this);

$('tbody tr.tr-line', self).each(function () { //等同于 self.find('tbody tr.tr-line')

var tr = $(this),

tbody = $('tbody', self);

$('

width: self.outerWidth(),

top: tr.offset().top + tr.outerHeight() / 2

}).show();

});

})

$(window).on('resize', function () {

$('.div-tr-line').each(function () {

var self = $(this);

self.width(self.parents('.otoc-table-trHasLine').outerWidth());

})

})

})