表格畫斜線
缺點是：瀏覽器自帶列印會出現格式錯亂，頁面展示沒問題
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/300144.html
標籤：其他
上一篇：??使用 HTML、CSS 和 JS 創建在線音樂播放器(含免費完整原始碼)??
下一篇：JS 如何實作占位符