html中使用js在table中画斜线

先来看看这是不是你想实现的大概样式，如果是的话请接着往下看

话不多说上代码，其中方法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>