javascript 动态添加表格行 javascript增加表格

转载

footballboy 2023-06-06 08:59:14

文章标签 html css js javascript web 文章分类 代码人生

使用JavaScript动态插入表格和数据

一、创建HTML并布置好基本格局

这里没有什么难点，基本HTML知识
为了简单实现没有使用thead和tbody进行设计

<html>
<head>
<meta charset="UTF-8">
<title>学生信息表</title> 
<style>

</style>
<script>

</script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>学号</td>
            </tr>
        </table>
    </div>
</body>
</html>

二、设置表格CSS

width是宽度，100%表示占据网页整个宽度
border是table边框
border-style是边框样式，dotted表示虚线，solid表示实线

<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
</style>

三、编写JavaScript脚本

1.首先在HTML中插入button，点击按钮时进行新增表格

<button onclick="new();">新增</button>

2.接着，编写new()函数体

innerHTML是插入HTML元素，这里其实插入的是文本，也可以插入其余元素，例如document.innerHTML = “标题”

<script>
    function add(){
        // 获取table标签元素
        let table = document.getElementById("work_table");
        // 创建新行
        let newRow = table.insertRow();
        // 创建三个新单元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 向表格中插入元素
        cellName.innerHTML = "张三";
        cellAge.innerHTML = "男";
        cellID.innerHTML = "1";
    }
</script>

3.运行效果

javascript 动态添加表格行 javascript增加表格_javascript

四、根据我上篇文章，实现弹出窗口输入文本然后插入表格

上篇文章链接 link.

1.实现弹出窗口，这里和上篇一样，不详细说明

<html>
<head>
<meta charset="UTF-8">
<title>学生信息表</title> 
<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
    body{
        background-color: cyan;
    }
    #popDiv{
        display: none;
        background-color: whitesmoke;
        z-index: 11;
        width: 600px;
        height: 600px;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }
    /* 关闭按钮样式 */
    #popDiv .close a {
        text-decoration: none;
        color: whitesmoke;
    }
    /* 弹出界面的关闭按钮 */
    #popDiv .close{
        text-align: right;
        margin-right: 5px;
        background-color:#2D2C3B;
    }
    #popDiv p{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }
</style>
<script>
    function popDiv(){
            // 获取div元素
            var popBox = document.getElementById("popDiv");
            var popLayer = document.getElementById("popLayer");

            // 控制两个div的显示与隐藏
            popBox.style.display = "block";
            popLayer.style.display = "block";
    }

    function closePop(){
        // 获取弹出窗口元素
        let popDiv = document.getElementById("popDiv");

        popDiv.style.display = "none";
    }

    function add(){
        // 获取table标签元素
        let table = document.getElementById("work_table");
        // 创建新行
        let newRow = table.insertRow();
        // 创建三个新单元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 向表格中插入元素
        cellName.innerHTML = "张三";
        cellAge.innerHTML = "男";
        cellID.innerHTML = "1";
    }
</script>
</head>
<body>
    <button onclick="popDiv();">弹窗</button>
    <div id="popLayer">
        <table id="work_table">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>学号</td>
            </tr>
        </table>
    </div>

    <div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">关闭</a>
        </div>
            <p>此处为弹出窗口</p>
    </div>
</body>
</html>

2.给弹出窗口设置三个文本框用于输入

<div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">关闭</a>
        </div>
        <div>
            请输入<br/><br/>
            <form
                <label>姓名(*)</label>       
                <input type="text" id="NAME"><br/>

                <label>年龄(*)</label>       
                <input type="text" id="AGE"><br/>

                <label>工人性别(*)</label>
                <input type="text" id="SEX"><br/>
            </form>
        </div>
    </div>

3.现在只需要修改add()函数就可以，也就是获取文本框的内容

这里相比于之前的add()函数只是新增了获取文本框的内容，获取文本框和获取table是一样的方法，通过id获取，也可以通过name和class获取
可以通过console.log(typeof(name.value));获取变量的类型，在浏览器中查看，F12打开console控制台

function add(){
        // 获取table标签元素
        let table = document.getElementById("work_table");
        // 创建新行
        let newRow = table.insertRow();
        // 创建三个新单元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 获取文本框内容
        let name = document.getElementById("NAME");
        let sex = document.getElementById("SEX");
        let age = document.getElementById("AGE");
        // 向表格中插入元素
        cellName.innerHTML = name.value;
        cellAge.innerHTML = age.value;
        cellSex.innerHTML = sex.value;
        console.log(typeof(name.value));

        closePop();
    }

五、总代码

<html>
<head>
<meta charset="UTF-8">
<title>学生信息表</title> 
<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
    body{
        background-color: cyan;
    }
    #popDiv{
        display: none;
        background-color: whitesmoke;
        z-index: 11;
        width: 600px;
        height: 600px;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }
    /* 关闭按钮样式 */
    #popDiv .close a {
        text-decoration: none;
        color: whitesmoke;
    }
    /* 弹出界面的关闭按钮 */
    #popDiv .close{
        text-align: right;
        margin-right: 5px;
        background-color:#2D2C3B;
    }
    #popDiv p{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }
</style>
<script>
    function popDiv(){
            // 获取div元素
            var popBox = document.getElementById("popDiv");
            var popLayer = document.getElementById("popLayer");

            // 控制两个div的显示与隐藏
            popBox.style.display = "block";
            popLayer.style.display = "block";
    }

    function closePop(){
        // 获取弹出窗口元素
        let popDiv = document.getElementById("popDiv");

        popDiv.style.display = "none";
    }

    function add(){
        // 获取table标签元素
        let table = document.getElementById("work_table");
        // 创建新行
        let newRow = table.insertRow();
        // 创建三个新单元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 获取文本框内容
        let name = document.getElementById("NAME");
        let sex = document.getElementById("SEX");
        let ID = document.getElementById("AGE");
        // 向表格中插入元素
        cellName.innerHTML = name.value;
        cellAge.innerHTML = age.value;
        cellSex.innerHTML = sex.value;

        closePop();
    }
</script>
</head>
<body>
    <button onclick="popDiv();">弹窗</button>
    <div id="popLayer">
        <table id="work_table">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>学号</td>
            </tr>
        </table>
    </div>

    <div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">关闭</a>
        </div>
        <div>
            请输入<br/><br/>
            <form
                <label>姓名(*)</label>       
                <input type="text" id="NAME"><br/>

                <label>年龄(*)</label>       
                <input type="text" id="AGE"><br/>

                <label>工人性别(*)</label>
                <input type="text" id="SEX"><br/>
            </form>
            <button onclick="add();">√保存</button>
        </div>
    </div>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。