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

2019独角兽企业重金招聘Python工程师标准>>>

<!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><!--表格内画线onload="LookForTb(testTable,testDiv);-->
</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>&nbsp;</TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR bgcolor="FFFFFF"> <TD>&nbsp;</TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR bgcolor="FFFFFF"> <TD>&nbsp;</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;}

转载于:https://my.oschina.net/xautchao/blog/204626

web 页面table 斜线效果跨越多行和多列相关推荐

html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下一.横向条纹如下代码:background ...
如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
html设置樱花飘落效果,jQuery实现web页面樱花坠落的特效
源码地址开发原因上课看到一位女生桌面背景是一课樱花树,顿时产生了一个让樱花可以在web页面飞舞的想法,借此把这个插件献送给那位女同学: 开发过焦点图,轮转图,瀑布流等应用插件,但是这类型插件还是第 ...
Web 页面如何实现动画效果
Web 页面可以使用多种方式实现动画效果,其中最常用的有两种: CSS 动画:通过 CSS 中的 transition 和 animation 属性来实现动画效果.CSS 动画实现起来简单,性能消耗小 ...
web页面jsp页面的打印
报表在信息系统中占据了极为重要的位置,广义上讲,报表主要以多样的格式呈现和打印动态数据,动态数据主要指保存在数据库中的数据,也可以是文本中的数据.XML数据.Hibernate数据.EJB数据.自定义 ...
web页面uri唤醒应用_带有数据URI的高性能Web设计
web页面uri唤醒应用我们最近在Webdesigntuts +上介绍了Web设计中的数据URI的内容,原因和方式 ,在其中研究了使用数据URI进行性能友好的界面设计的一些可能性. 在今天的Prem ...
php与web页面交互
一.web表单 web表单的功能是让浏览者和网站有一个互动的平台.web表单主要用来在网页中发送数据到服务器. 1.1 表单的创建使用form标记,并在其中插入相关的表单元素,即可创建一个表单. 1 ...
html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...
web页面之弹出窗口
功能概述 web页面中,常见弹出对话框显示页面内容的功能,html语言中js默认提供 showModalDialog()方法显示的页面标题存在路径字符串,各个浏览器显示的效果不一致,界面不美观,下面介 ...

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

web 页面table 斜线效果跨越多行和多列相关推荐

最新文章

热门文章

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

web 页面table 斜线效果 跨越多行和 多列相关推荐

最新文章

热门文章

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

web 页面table 斜线效果跨越多行和多列相关推荐