JS创建表格

最新推荐文章于 2024-05-03 16:01:29 发布

紫色凌乱

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量229

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Edgar_LQS/article/details/103355606

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

时间：2019.12.02.19.41
采用JS代码创建表格，参考GitHub地址

createTable.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>创建表格</title>
    <style type="text/css"></style>
</head>

<body>
    <!-- 定义一个按钮，按钮触发的时间为点击，然后跳转到定义的方法触发事件 -->
    <!-- style="display:block;margin:0 auto" 实现按钮居中显示 -->
    <input type="button" value="创建表格" onclick="creatTable()" style="display:block;margin:0 auto">
    <div id="div1"></div>
</body>

</html>

<script>
    /**
      *  方法名 creatTable()
      *  时间2019.11.30.23.54
      */
    function creatTable() {
        var rows = 3; // 行数
        var clos = 2; // 列数
        var tab = '<table border=1 width="500" cellpadding="10" align="center">'
        tab += "<caption>定义表头</caption>";
        tab += "<tr><th>第一列名</th>\
                            <th>第二列名</th>"
        for (var i = 0; i < rows; i++) {
            tab += '<tr>'
            for (var j = 0; j < clos; j++) {
                // target 当点击时在另外的页面打开
                tab += "<td ><label style=\"color:blue; text-align: center;\" class=\"showclass\" id=\"show" + i + j + "\">" + i + "</label></td>"
                // 此处可采用 a 标签定义链接
            }
            tab += '</tr>';
        }
        tab += '</table>';
        // 显示表格
        div1.innerHTML = tab
    };
</script>

紫色凌乱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS创建表格

时间：2019.12.02.19.41采用JS代码创建表格，参考GitHub地址createTable.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>创建表格</title> <style...
复制链接

扫一扫