admin 管理员组文章数量: 1184232
起初是为了帮朋友做这个东西，因为他说只是单纯的表格，所以不敢用太多的插件，外带考虑兼容性的问题，强行用js做了。
在网上找了找，前辈的原文使用:before的css样式（ ）。
因为td的长和宽、窗口的大小可能不是固定的，所以css里面写死了肯定不行，于是想到了用js改变css的样式，研究了半天没研究出来，后来发现了用js新增css样式的方式，磨叽磨叽就成了下面这样子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>td加斜线</title>
<style>
table{
border-collapse:collapse;
}
table,tr,td{
border:1px solid black;
}
td{
width:300px;
height:100px;
position: relative;
}
</style>
</head>
<body onresize=>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th style="width:444px">性别</th>
</tr>
<tr>
<td class="fillSlash"></td>
<td></td>
<td class="fillSlash"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
//增加id对应的画斜线的方法
function drawSlash(id){
//根据id获取长度和宽度
var width = document.getElementById(id).offsetWidth;
var height = document.getElementById(id).offsetHeight;
//计算斜线的长度
var slashLength = Math.sqrt(width*width + height*height);
//console.log("slashLength is " +slashLength);
//计算斜线的角度
var slashAngle = 360*Math.atan(width/height)/(2*Math.PI);
//console.log("slashAngle is " + slashAngle);
//用js新增一个<style>标签用来处理这个id对应的td
var style = document.createElement('style');
style.type = 'text/css';
//就是把前辈的那个css给抄了一遍
style.innerHTML="#"+id+":before{ height: "+ slashLength +"px; transform: rotate(-"+ slashAngle +"deg);content:\"\";position: absolute;width: 1px;top:0;left:0;background-color: black;display: block;transform-origin: top; }";
document.getElementsByTagName('head').item(0).appendChild(style);
}
//根据class获取对象列表，实现按class属性绘制斜线
function drawSlashByClass(){
var allElementThisClass = document.getElementsByClassName('fillSlash');
for(var i=0;i<allElementThisClass.length;i++){
var idStr = 'fillSlash'+i;
//给对象增加id
allElementThisClass[i].setAttribute('id',idStr);
drawSlash(idStr);
}
}
//绘制
drawSlashByClass();
//拖动窗口后斜线飞出表格外的处理方法
window.onresize = function myFunction(){
//console.log('窗口变化，重新绘制斜线')
drawSlashByClass();
}
</script>
个人感觉还是比较粗暴的方法，但是我一个写java后台的，搞这个我也很绝望啊……
效果图如下（其实真的可以塞一个画了斜线的图片当背景……）
版权声明：本文标题：简单步骤：使用代码为你的Table单元格添加创意斜线 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1772188043a3553105.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论