html中使用js在table中画斜线

news/2024/11/29 23:38:02/

先来看看这是不是你想实现的大概样式,如果是的话请接着往下看在这里插入图片描述

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

http://www.ppmy.cn/news/703637.html

相关文章

如何在EXCEL表格中加斜线表头

目录 如何在EXCEL表格中加斜线表头 1、在月份和姓名单元中按ALTEnter自动换行 如图二 2、先选中单元格点击“左对齐” 用“空格键” 将 月份 两字 移动至单元格右侧 3、右键选择设置单元格格式&#xff0c; 4 选择“边框 ”点击方框2样式后&#xff0c;确定完成斜线表头。​…

计算机Wor表格制作斜线表头,Word文档里怎么画表格斜线表头

回答&#xff1a; Word表格教程:制作表格 在Word 中有3种制作表格的方法。 一、从工具栏快捷按钮插入 单击“常用”工具栏上的“插入表格”按钮&#xff0c;然后拖动鼠标选定所需的表格行数和列数即可创建一个规则的表格。如下图&#xff1a; 二、从菜单插入。 1、单击菜单栏“…

怎样在excel表格中画斜线并打字_一日一技丨Excel斜线表头如何制作?标题、表头的4个技巧...

来源 | 迅捷PDF转换器 (ID:xjpdf6) 作者丨小小迅 「一日一技」是每天的知识分享专栏&#xff0c;一是分享一些PDF、Office、办公小技巧&#xff1b;二是抽取小可爱们在留言中的疑问并解决。希望对大家有所帮助&#xff01; 表头的标题是Excel中的第一道大门&#xff0c;精致好看…

html表格中加入斜线,在HTML中显示带斜线的表格

table{ border-collapse:collapse; } table,tr,td{ border:1px solid black; } td{ width:150px;/*这里需要自己调整&#xff0c;根据自己的需求调整宽度*/ height:50px;/*这里需要自己调整&#xff0c;根据自己的需求调整高度*/ position: relative; } td[classfirst]:before{…

如何用java POI在excel中画线_Java中使用POI在Excel单元格中画斜线—XLS格式

Excel主要有xls和xlsx两种格式,两种格式对应的POI接口使用方法也不同。 本节主要介绍一下,在xls格式的Excel单元格中如何画斜线。 1、初始化HSSFWorkbook对象 初始化HSSFWorkbook对象,创建两行两列单元格,分别设置行高和列宽以及单元格的边框。 /** * @Author 通靈鹿小六 *…

html表内画斜线,使用HTML的canvas,给表格画斜线-Go语言中文社区

使用HTML的canvas,给表格中画斜线给表格加斜线 table,td{border:2px solid black; border-collapse:collapse; } #header{width:80px; height:40px; } function line(header,line_width,line_color,line_number){var table = document.getElementById(header); var xpos = tab…

怎样在excel表格中画斜线并打字_你会用Excel做 表头 吗?

文 ▏赵志东 来源 ▏Excel精英培训 每个excel表格都需要表头&#xff0c;这是对表头技巧做的一个总结&#xff0c;希望能给您工作带来助益。 1、表头设置渐变色 要点&#xff1a; 在填充颜色时&#xff0c;有一个大家都不太注意的填充效果按钮&#xff0c;打开的就可以设置渐变…

SpringMvc中文件上传

文章目录 1.导入文件上传所需要的jar包 2. 配置文件解析器 3.写一个前端页面 4.写后台程序 1.导入文件上传所需要的jar包 <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.…