[Original] Strikethrough on tr - and satisfy multiple tables on one page

Others 2022-04-23 05:10:58 views: 0

Foreword:

Adding a strikethrough to the tr line is basically difficult to achieve in the pure CSS state. Because of the tr tag, it can no longer contain dom elements other than td. Therefore, the positioning of elements can only be achieved by relative positioning or offset.

The realization is divided into 3 steps. If you don’t want to see the process, pull it directly to the bottom: the final effect and the complete code

 

The first method: single table - single line

  1. get the index value;
  2. Do a relative offset from the height of the head
  3. Disadvantages: Can not meet the multi-line problem of the table.

css

<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>

html

<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>

js

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>

 

Principle: Use relative positioning to find the index value of tr-line in tr under the table .otoc-table-trHasLine tbody, and then change its top value.

$(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)

})

 

The second method, single table - multi-line

  1. Added the same number of line types as the table dom---"tbody;
  2. Here, a traversal is made for all containing tr-line;
  3. Disadvantages: Can not meet the multi-table problem.
$(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("不操作！")
       } 
	}
})

 

The third method, multi-table-multi-line

  1. Use double-layer each() to traverse each table;
  2. Then give the eligible offset
  3. Advantages: Perfect realization of multi-table-multi-line requirements.

 

Final effect and complete code:

 

<!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>

<!--

 

Delete the misalignment, the final corrected version (the version currently used in the online store:)

$(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();
            }
        }
    })

})

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325484519&siteId=291194637
Recommended
NetBSD bans submission of code generated by AI
Ranking
Talk dubbo of LRUCache
Chapter 1 Learning Summary
Introduction to Virtualization
pytorch 调用lstm
Six modules
[8086] The natural number of 1 to 36 into a 6x6 two-dimensional array of line-sequentially, and then print out the lower left half of the triangular array
mybatis mapper mapping file $ # {} {} understanding and
C language input and output buffer
c language floating-point input and output
andorid P version compatible, refer to Huawei
Daily
More
2024-05-18(31)
2024-05-17(6)
2024-05-16(23)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)

Code World

© 2018 codetd.com