记录-通过raphael.min.js实现table表头斜线

2021-07-03 09:33:35 阅读：224 来源： 互联网

标签：min 表头 js paper nbsp offset path M0

通过raphael.min.js实现table表头斜线

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/raphael/2.2.7/raphael.min.js"></script>
</head>

<body>
    <div id="lineDiv" style='position:absolute;z-index:9999;'></div>
    <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
        <tr>
            <td id="lineTd" style="border:#000000 solid 1px;width:219px;height:76px;vertical-align:top;"
                points="[110,79,222,42,222,79]">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月份<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>省份&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;城市
            </td>

            <td style="text-align:center;border:#000000 solid 1px;height:45px;vertical-align:top;">201206</td>
        </tr>
        <tr>
            <td style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;vertical-align:top;">潜在客户数</td>
            <td style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;vertical-align:top;">新增客户数</td>
        </tr>
    </table>
</body>
<script>
    $(function () {
        var paper = new Raphael("lineDiv");
        paper.path("M0,0L110,85");//坐标(0,0)(110,85)
        paper.path("M0,0L220,52");//坐标(0,0)(220,42)
        //   paper.path("M0,0L220,79");//坐标(0,0)(220,79)
        var offset = $("#lineTd").offset();//td的位置
        //将画线的DIV移动到td的位置
        $("#lineDiv").offset({ top: offset.top, left: offset.left });
    })
</script>

</html>

最终效果

大家还有什么好的方法可以告诉我呀，谢谢啦~

标签：min,表头,js,paper,nbsp,offset,path,M0
来源： https://www.cnblogs.com/Ananiah/p/14965585.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

记录-通过raphael.min.js实现table表头斜线