JSP表格画斜线

Posted 2021-10-01 大腿不要的腿毛

表格画斜线

缺点是：浏览器自带打印会出现格式错乱，页面展示没问题

 <script type="text/javascript">
 	$(function () {
        	 window.onload=function(){
             	setTimeout( function(){
             	// 开始时定时器延迟加载  DOM树加载完成后再进行画斜线
             		 change()
             		}, 500 );
             }
        });
        function change() {
   			// 初始值
            var top = 0;
            var left = 0;
            var length = 0;
            var angle = 0; // 旋转角度
            var width = $('.inslash').width(); // 宽度
            var height = $('.inslash').height(); // 高度
            //线条position设置为absolute时，坐标需要重新定位，获取单元格的偏移量作为线条的偏移量
            top = $('.inslash').offset().top; // 距离顶部表格得高度
            left = $('.inslash').offset().left + width; // 距离左边表格得距离
            if(height>0){
            	angle = Math.round(Math.atan(width / height) * 180 / Math.PI);
            	 //获取对角线角度，Math.atan()获取的是弧度，乘于180/pi得到角度
            }
            length = Math.sqrt(width * width + height * height); //获取对角线长度，勾股定理
            $('style').append('.inslash::before {content: ""; position: absolute; width: 1px;left: ' + left + 'px;top: ' + top + 'px;background-color: #000; transform-origin: top;height: ' + length + 'px; transform: rotate(' + angle + 'deg);}');
        }; 
        
 </script>
 	<table>
		 <tr align="center">
            <td >
                <div align="center">测量</div>
            </td>
            
            <td colspan="2">
              <select id="input132" style="width: 95%;">
                    <option>全部</option>
              </select>
            </td>
            <td colspan="2">
               <select id="input133" style="width: 95%;">
                  <option>全部</option>
                </select>
            </td>
            <td colspan="2">
                <select id="input134" style="width: 95%;">
                  <option>全部</option>
                </select>
            </td>
             <td colspan="2">
               <select id="input135" style="width: 95%;">
                  <option>全部</option>
                </select>
            </td>
             <td colspan="2">
               <select id="input136" style="width: 95%;">
                  <option>全部</option>
                </select>
            </td>
             <td colspan="2">
              <select id="input137" style="width: 95%;">
                   <option>全部</option>
                </select>
            </td>
           
            <td class="inslash" >
               
            </td>
          </tr>
        </table>