【原创】tr上加删除线-且知足一个页面多表格
前言：
tr行增长删除线，在纯css状态下，基本很难实现。由于tr这种标签，不能再包含除了td之外的dom元素。所以，只能经过相对定位或者偏移来实现元素的定位。javascript
实现一共分了3步来完，不想看过程的直接拉到最下面：最终效果和完整代码css
第一种方法：单表格-单线
- 取索引值；
- 作距离头部高度的相对偏移
- 弊端：没法知足表格多线问题。
csshtml
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<style>
.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);
}
</style>
htmljava
<div class="container"> <table class="table otoc-table-trHasLine"> <thead> <tr> <th>序号</th> <th>内容</th> <th>操做</th> </tr> </thead> <tbody> <div class="otoc-tr-line"></div> <!--初始化是塞了一线型的dom在里面----> <tr> <td>1</td> <td>精洗车辆</td> <td>删除</td> </tr> <tr> <td>2</td> <td>精洗车辆</td> <td>删除</td> </tr> <tr class="tr-line"> <td>4</td> <td>精洗车辆</td> <td>删除</td> </tr> <tr> <td>3</td> <td>精洗车辆</td> <td>删除</td> </tr> <tr> <td>5</td> <td>精洗车辆</td> <td>删除</td> </tr> </tbody> </table> </div>
jsjquery
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
原理：利用相对定位，找到表格.otoc-table-trHasLine tbody 下tr里面含有tr-line的索引值，而后，改变它的top值。bootstrap
$(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 class=div-tr-line id=tr-line-'+i+'></div>');
}
//线与表格等宽
$(".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
- 优势：完美实现了多表格-多线需求。
最终效果和完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tr多条线版本</title>
<link rel="stylesheet" href="http://v3.bootcss.com/dist/css/bootstrap.min.css" />
<style>
.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;
}
</style>
</head>
<body>
<div class="container">
<table class="table otoc-table-trHasLine">
<thead>
<tr>
<th>序号</th>
<th>内容</th>
<th>操做</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
<tr class="tr-line">
<td>2</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
<tr>
<td>3</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
<tr class="tr-line">
<td>4</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
<tr>
<td>5</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
</tbody>
</table>
<table class="table otoc-table-trHasLine">
<thead>
<tr>
<th>序号</th>
<th>内容</th>
<th>操做</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
<tr class="tr-line">
<td>2</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
<tr>
<td>3</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
<tr class="tr-line">
<td>4</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
<tr class="tr-line">
<td>5</td>
<td>精洗车辆</td>
<td>删除</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="http://v3.bootcss.com/assets/js/vendor/jquery.min.js"></script>
<script>
$(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);
$('<div class="div-tr-line" />').appendTo(tbody).css({
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());
})
})
})
</script>
<!--
删除线对不齐，最终修正版本（目前线上门店里用的版本：）
$(window).load(function(){
/*功能：工单详情-项目和配件-减项-删除线
*备注：tbody_height和tbody_tr_height的高度须要减掉1的边框高度；不然会随着项目或配件的条数增大，偏移值会愈来愈大。
*-----by chai
*/
$(".otoc-table-trHasLine").each(function (index) {
var table_width = $(this).width();
var thead_height = $(this).find("thead").outerHeight();
var tbody_height = $(this).find("tbody").innerHeight();
tbody_height = tbody_height-1;
var tbody_tr_height = $(this).find("tbody tr").innerHeight(); //outerHeight
tbody_tr_height = tbody_tr_height-1;
//追加跟tr相同数量的线dom
var tbody_tr = $(this).find("tbody tr")
for (var i=1;i<=tbody_tr.length;i++)
{
$(this).find("tbody").append('<div class=div-tr-line id=tr-line-'+index+'-'+i+'></div>');
}
//线与表格等宽
$(this).find(".div-tr-line").width(table_width)
//遍历含有.tr-line的表格行
for (var i=1;i<=tbody_tr.length;i++)
{
if ($(this).find("tr").eq(i).hasClass("tr-line"))
{
//改变top值
var line_top = i*tbody_tr_height-(tbody_tr_height/2)-tbody_height
$("#tr-line-"+index+'-'+i).css("margin-top",line_top).show();
}
}
})
})
相关文章
- 1. jquery 追加tr和删除tr
- 2. 创建jsp表格页面_创建一个JSP页面
- 3. iOS UILabel 价格上面的删除线
- 4. 10-表格添加、删除
- 5. 表格多选删除
- 6. jQuery 动态实现表格添加一行，删除一行且第一行不能删除
- 7. mysql一条语句删除多表（多表删除）
- 8. 表格添加删除修改
- 9. easyui添加删除表格任意行
- 10. layui多个数据表格共存一个页面处理
- 更多相关文章...
- • SQLite 删除表 - SQLite教程
- • C# 多线程 - C#教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章