一个IE下给表格单元格划斜线的代码

zoukankan html css js c++ java

一个IE下给表格单元格划斜线的代码

我们在表格中经常会有这样的需求，如果某单元格不需要数据，则将单元格对角线划一个斜线，今天项目用到，由于不需要兼容性，所以没考虑兼容性，只适应IE下，完美主义者慎入。

直接附上代码，用了jquery，如不用jquery可以适当修改下代码，IE下可用：

View Code

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head><title>Line</title>
</head>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML)}
table{background-color:#000;}
tr{background-color:#FFF;}
td{height:25px;text-align:center;}
</STYLE>
<script language="javascript">
    function showLine(jqObj)
    {
        var comObj = $(jqObj)[0];
        var fromStr = comObj.offsetLeft+","+comObj.offsetTop;
        var toStr = (comObj.offsetLeft+comObj.offsetWidth)+","+(comObj.offsetTop+comObj.offsetHeight);
        var lineStr = "<center><v:line from='"+fromStr+"' id='abc' to='"+toStr+"' style='position:relative;'/></center>";
        comObj.innerHTML = lineStr;
    }
    $(document).ready(function(){
        $(".line").each(function(){
            showLine(this);
        });
    })
</script>
<body>

<table cellpadding="0" cellspacing="1" border="0">
<tr>
    <td width="120" class="line"></td>
    <td width="120">语文</td>
    <td width="120">数学</td>
    <td width="120">英语</td>
</tr>
<tr>
    <td>小刚</td>
    <td>50</td>
    <td class="line"></td>
    <td>80</td>
</tr>
<tr>
    <td>小明</td>
    <td class="line"></td>
    <td>70</td>
    <td>99</td>
</tr>
<tr>
    <td>小红</td>
    <td>70</td>
    <td>80</td>
    <td class="line"></td>
</tr>
</table>
</body>

效果图：

查看全文

相关阅读:
【译】可扩展前端2 — 常见模式
 【译】可扩展前端1 — 架构基础
 【译】The Clean Architecture
获取页面元素位置
 vue高价组件的使用
 gif动态图片转精灵图
 消除 transition 闪屏
 移动端 -- 如何去掉元素被触摸时产生的半透明灰色遮罩？
解决手机移动端触屏版web页面长时间按住页面出现闪退的问题
 移动端滑动慢，卡顿

原文地址：https://www.cnblogs.com/kdalan/p/2542036.html