页面中的表格如何画斜线

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

luanxiyuan

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

阅读量424

点赞数

CC 4.0 BY-SA版权

分类专栏：经(cǎi)验(kēng)总结文章标签： javascript c/c++ ViewUI

本文链接：https://blog.youkuaiyun.com/luanxiyuan/article/details/84298316

经(cǎi)验(kēng)总结专栏收录该内容

251 篇文章

订阅专栏

有的时候我们在做开发的时候会想要画出有斜线的表格，方法如下：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>表格斜线</title>
    </head>
    <script Language="javascript">
        function a(x, y, color) { //起始位置x，y；宽、高度都是1个像素；颜色是color画线。
            document.write("<img border='0' style='position: absolute; left: "
                + (x + 18) + "; top: " + (y + 18) + ";background-color: "
                + color + "' src='px.gif' width=1 height=1>");
        }
    </script>
    <body leftmargin=18 topmargin=18>
        <table border=0 bgcolor="000000" cellspacing="1" width=398>
            <tr bgcolor="FFFFFF">
                <td id="td1">
                </td>
                <td>
                    张三
                </td>
                <td>
                    李四
                </td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    c
                </td>
                <td>
                    72
                </td>
                <td>
                    36
                </td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    c++
                </td>
                <td>
                    85
                </td>
                <td>
                    58
                </td>
            </tr>
        </table>
        <script>
            function line(x1, y1, x2, y2, color) {
                var tmp;
                if (x1 >= x2) {
                    tmp = x1;
                    x1 = x2;
                    x2 = tmp;
                    tmp = y1;
                    y1 = y2;
                    y2 = tmp;
                }
                for (var i = x1; i <= x2; i++) {
                    x = i;
                    y = (y2 - y1) / (x2 - x1) * (x - x1) + y1; //y=ax+b：标准的直线表达式，通过斜率求y值
                    a(x, y, color);
                }
            }
        
            line(td1.offsetLeft, td1.offsetTop, td1.offsetLeft + td1.offsetWidth, td1.offsetTop + td1.offsetHeight, '#000000');
        </script>
    </body>
</html>