先来看看这是不是你想实现的大概样式,如果是的话请接着往下看
话不多说上代码,其中方法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>