怎么用js做一个表格

JavaScript012

怎么用js做一个表格,第1张

1.在页面div中创建一个空白表,可以根据需要对其进行定制。

2.创建表之后,我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。

3.在<TB >标签中,我们添加了标签,主要用于提供用户输入参数,而全局变量num主要用于区分每个添加参数的唯一id。

4.获取表中的数据,以供下图参考。

5.一旦我们获得了表中的数据,我们就应该将其转换成json数据的形式。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html charset=UTF-8">

    <title>RunJS 演示代码</title>

    <style>

        * {

    margin: 0

}

body {

    background-color: rgb(44, 52, 55)

}

table {

    border-collapse: collapse

}

th,td {

    border: 1px solid #fd3

    width: 20px

    height: 15px

}

    </style>

    <script>

        var produce = function() {

            var tab = document.createElement("table")

            var tb = document.createElement("tbody")

            var i = r.value * 1

            var j = c.value * 1

            for (var m = 0 m < i m++) {

                var tr = tb.insertRow(tb.rows.length)

                for (var n = 0 n < j n++) {

                    tr.insertCell(tr.cells.length)

                }

            }

            result.innerHTML = ""

            tab.appendChild(tb)

            result.appendChild(tab)

        }

    </script>

</head>

<body>行数:

    <input type="text" id="r" />

    <br />列数:

    <input type="text" id="c" />

    <br />

    <button onclick="produce()">生成表格</button>

    <div id="result"></div>

</body>

</html>