web 页面table 斜线效果跨越多行和多列

最新推荐文章于 2023-08-21 10:48:12 发布

原创最新推荐文章于 2023-08-21 10:48:12 发布 · 6.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#table #web #function #input #xhtml #javascript

这篇博客通过HTML和JavaScript展示了如何在web页面的表格中实现跨多行和多列的斜线效果。通过分析和遍历表格单元格，确定空单元格并绘制线条，实现了动态的表格内部画线功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用代码说话！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns:v="urn:schemas-microsoft-com:vml"> <head runat="server"> <title>无标题页</title>  <SCRIPT language="javascript" src="JS/DrawLine.js" mce_src="JS/DrawLine.js" type="text/javascript"></SCRIPT> <STYLE> v/:* { BEHAVIOR: url(#default#VML) }</STYLE>  </head> <body onload="LookForTb(testTable,testDiv); > <form id="form1" runat="server"> <DIV id="testDiv" style="Z-INDEX:200" mce_style="Z-INDEX:200"></DIV> <TABLE id="testTable" border=1 bgcolor="000000" cellspacing="1" width=400 > <TR bgcolor="FFFFFF"> <TD id="td1"> </TD> <TD>张三</TD> <TD>李四</TD> <TD>王五</TD> </TR> <TR bgcolor="FFFFFF"> <TD>数学</TD> <TD>55</TD> <TD>66</TD> <TD>77</TD> </TR> <TR bgcolor="FFFFFF"> <TD></TD> <TD></TD> <TD>68</TD> <TD>71</TD> </TR> <TR bgcolor="FFFFFF"> <TD> </TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR bgcolor="FFFFFF"> <TD> </TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR bgcolor="FFFFFF"> <TD> </TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR bgcolor="FFFFFF"> <TD>英语</TD> <TD>99</TD> <TD></TD> <TD></TD> </TR> <TR bgcolor="FFFFFF"> <TD>语文</TD> <TD>33</TD> <TD>44</TD> <TD>55</TD> </TR> </TABLE> </form> </body> </html> //============================= //页面画线 //table 为空单元格画斜线 //输入框，span 为空，上加横线 //autor:dy //lastDate:20080522 //============================ String.prototype.trim = function() { return this.replace(/(^/s*)|(/s*$)/g, ""); } //table内画线 //一般表格斜线 function LookForTb(table,divID){ for (var i=0; i < table.rows.length; i++) { for (var j=0; j < table.rows[i].cells.length; j++) { var obj = table.rows[i].cells[j]; var x,y,x1,y1; var o = findLastRow(obj,table); //alert('obj.innerText='+obj.innerText+'obj.innerText.trim()='+obj.innerText.trim()) if( tdIsNull(obj)) { o=findLastRow(obj,table); //记录初始位置 x=obj.offsetLeft; y=obj.offsetTop; //记录结束位置 x1=o.offsetLeft+o.offsetWidth; y1=o.offsetTop+o.offsetHeight; //跳过已画线单元格 if(o.cellIndex>obj.cellIndex) { j=o.cellIndex; } //跳过已画线行 if(o.parentNode.rowIndex>obj.parentNode.rowIndex) { i=o.parentNode.rowIndex; } } //画线 var str="<v:line id="+x1+y1+x+y+" from=/""+x+","+y+"/" to=/""+x1+","+y1+"/" Style="/" mce_Style="/""z-index:201; position:absolute; left:"+table.style.left+"; top:"+table.style.top+";/"></v:line>"; // alert(str); var o=document.createElement(str); divID.innerHTML += o.outerHTML; } } } //递归找到最后一个空列 function LookFortr(obj,table) { var o=obj; var i=obj.parentNode.rowIndex; var j=obj.cellIndex; //alert(i+":"+j); j++; if(table.rows[i].cells[j] != null && table.rows[i].cells[j] != "undefined" ) { if( tdIsNull(table.rows[i].cells[j])) { o=table.rows[i].cells[j]; o=LookFortr(o,table); } } return o; } //找到最后一个空行 function findLastRow(obj,table) { var o=LookFortr(obj,table); //判断当前行是否空行 if(IsEmptyRow(o,table)) { r=table.rows[o.parentNode.rowIndex+1]; if(r==null || r=='undefined') { return o; } o=table.rows[o.parentNode.rowIndex+1].cells[0]; if(o!=null && o!='undefined') { //判断下一行是否空行 if(IsEmptyRow(o,table)) //下一行如果空行 { //alert('bb'); o=findLastRow(o,table); } else //返回当前行最后列 { //alert('aa'); o=LookFortr(obj,table); } } } return o; } //是否空行 function IsEmptyRow(obj,table) { var tmp=""; var tmpHTML=""; i=obj.parentNode.rowIndex; for(j=0;j<table.rows[i].cells.length;j++) { if(table.rows[i].cells[j].tagName!="INPUT" && table.rows[i].cells[j].tagName != 'IMG' && table.rows[i].cells[j].tagName!="input" && table.rows[i].cells[j].tagName != 'img') { // alert('table.rows[i].cells[j].innerHTML='+table.rows[i].cells[j].innerHTML+'table.rows[i].cells[j].innerText='+table.rows[i].cells[j].innerText); //alert(table.rows[i].cells[j].innerText); try{ tmp+=table.rows[i].cells[j].innerText.trim().replace(" ","").replace("　",""); tmpHTML+=table.rows[i].cells[j].innerHTML; } catch(e) { // alert(e.message); } } else { return tdIsNull(table.rows[i].cells[j]); } } //alert("tmp="+tmp+"!!!!!!!!!!!!!!!!!!"); //alert(tmpHTML); if(tmp=="") { // alert('true'); return true; } else { //alert('false'); return false; } } //判断单元格内控件值是否为空 function tdIsNull(o) { if(o.getElementsByTagName("img").length>0) { //alert(o.innerHTML); return false; } if(o.getElementsByTagName("input").length>0) { var v=""; for(var i=0;i<o.all.length;i++) { if(o.all.item(i).tagName=="INPUT") { v+=o.all.item(i).value; } } if(v.trim()=="") { return true; } else { return false; } } else if(o.innerText.trim()=="") {return true;} return false; }