【原創】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學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章