先来看看这是不是你想实现的大概样式,如果是的话请接着往下看
话不多说上代码,其中方法line不用改变,具体信息见注释
<style>
#header { //定义你要画斜线的td大小,也可以不写,跟随你建的table自适应
width: 80px;
height: 40px;
}
</style>
<script>
//这部分为了添加td中的斜线
function line(header,line_width,line_color,line_number){//该方法不用动
var table = document.getElementById(header);
var xpos = table.clientWidth;
var ypos = table.clientHeight;
var canvas = document.getElementById('line');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,xpos,ypos); //清空画布,多个表格时使用
ctx.fill();
ctx.lineWidth = line_width;
ctx.strokeStyle = line_color;
ctx.beginPath();
switch(line_number){
case 1:
ctx.moveTo(0,0);
ctx.lineTo(xpos,ypos);
break;
case 2:
ctx.moveTo(0,0);
ctx.lineTo(xpos/2,ypos);
ctx.moveTo(0,0);
ctx.lineTo(xpos,ypos/2);
break;
case 3:
ctx.moveTo(0,0);
ctx.lineTo(xpos,ypos);
ctx.moveTo(0,0);
ctx.lineTo(xpos/2,ypos);
ctx.moveTo(0,0);
ctx.lineTo(xpos,ypos/2);
break;
default:
return 0;
}
ctx.stroke();
ctx.closePath();
document.getElementById(header).style.backgroundImage = 'url("' + ctx.canvas.toDataURL() + '")';
//document.getElementById(header).style.background-attachment= 'fixed';
}
}
window.onload = function (){ //调用line方法
line('header',1,'black',1);
line('header1',1,'black',1);
line('header2',1,'black',1);
line('header3',1,'black',1);
//目标单元格,线的宽度,线的颜色,线的条数,1~3,
}
window.onresize = function(){ //当窗口改变时,也随之改变
//可以加上检测 宽度高度是否变化在执行函数
line('header',1,'black',1);
line('header1',1,'black',1);
line('header2',1,'black',1);
line('header3',1,'black',1);
}
</script>
//以下html代码我只择出最重要的需要添加的
//在你的body中,先写上这行 canvas 代码
<canvas id="line" style="display:none;"></canvas>
//以下是建表操作,在你想画斜线的td中,写上id="header",如果有多个td要画斜线,最好多写几个id,然后在window.onload中去调用,我试过将id改成class,但是有些方法就会报错,大家可以多多尝试
<table>
<tr>
<td class='borderTd addTdBgColor' rowspan="2" align='center'></td>
<td class='borderTd addTdBgColor' rowspan="2" align='center'>编制数</td>
<td class='borderTd addTdBgColor' rowspan="2" align='center'>截至7月底实有数</td>
<td class='borderTd addTdBgColor' colspan="2" align='center' width="10px">拟报废</td>
<td class='borderTd addTdBgColor' colspan="2" align='center'>拟新增</td>
</tr>
<tr>
<td class='borderTdNoTop addTdBgColor' align='center'>数量\面积(平方米)</td>
<td class='borderTdNoTop addTdBgColor' align='center'>金额(元)</td>
<td class='borderTdNoTop addTdBgColor' align='center'>数量\面积(平方米)</td>
<td class='borderTdNoTop addTdBgColor' align='center'>金额(元)</td>
</tr>
<tr>
<td class='borderTd addTdBgColor' align='center'>车辆</td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
</tr>
<tr>
<td class='borderTd addTdBgColor' align='center'>土地</td>
<td class='borderTdNoTop rh-item' id="header" align='left'></td>//该框要画斜线
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
</tr>
<tr>
<td class='borderTd addTdBgColor' align='center'>房屋</td>
<td class='borderTdNoTop rh-item' id="header1" align='left'></td>//该框要画斜线
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
</tr>
<tr>
<td class='borderTd addTdBgColor' align='center'>单价50万元及以上的通用设备</td>
<td class='borderTdNoTop rh-item' id="header2" align='left'></td>//该框要画斜线
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
</tr>
<tr>
<td class='borderTd addTdBgColor' align='center'>单价100万及以上的专用设备</td>
<td class='borderTdNoTop rh-item' id="header3" align='left'></td> //该框要画斜线
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
<td class='borderTdNoTop rh-item' align='left'></td>
</tr>
</table>