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>

    效果图:
  • 相关阅读:
    莎士比亚名言
    庄子名言
    Javascript: 通过图片url获取图片blob对象
    toast提示 封装
    maya模型导入UE4,如何做到等比导入
    GPU渲染和CPU渲染农场成本对比
    C4D渲线框
    C4D教程笔记——高科技线框3D模型全息投影 X-Wing Hologram Animation
    arnold和redshift渲染器
    使用Redshift渲染器,怎么选电脑配置!
  • 原文地址:https://www.cnblogs.com/kdalan/p/2542036.html
Copyright © 2011-2022 走看看