使用Jquery完成动态表格的功能

aigo-2021

已于 2022-05-22 21:42:44 修改

阅读量1.3k

点赞数 1

分类专栏： javaWeb 文章标签： html 前端 jquery

于 2022-05-15 19:31:22 首次发布

本文链接：https://blog.csdn.net/aigo_2021/article/details/124786457

版权

javaWeb 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

使用Jquery完成动态表格的功能

1. 代码展示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加新员工</title>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                var tr = $("<tr>");//创建一个tr对象，获取输入框中的值
                //当3列都不为空时，才能添加行
                if($("#name").val()!="" && $("#email").val()!="" && $("#salary").val()!=""){
                    tr.append($("<td align='center'>").html($("#name").val()));
                    tr.append($("<td align='center'>").html($("#email").val()));
                    tr.append($("<td align='center'>").html($("#salary").val()));
                    //每次提交之后，将每个输入框中的值清空
                    $("#name,#email,#salary").val("");
                    btn_del = $("<td align='center'><a href='#'>Delete</a>");//超链接
                    btn_del.click(function () {//删除事件
                        $(this).parent().remove();
                    });
                    tr.append(btn_del);//添加到最后一行
                    $("#emptable").append(tr);
                }else{
                    alert("请将信息填写完整！");
                }
            });
        });
    </script>
</head>
<body>
<div align="center">添加新员工</div>
<!--增大间距-->
<table height="30px">
    <tr>
        <td></td>
    </tr>
</table>
<table align="center">
    <tr>
        <td>name:</td>
        <td><input type="text" id="name"></td>
        <td>email:</td>
        <td><input type="text" id="email"></td>
        <td>salary:</td>
        <td><input type="text" id="salary"></td>
    </tr>
</table>
<table height="20px">
    <tr>
        <td></td>
    </tr>
</table>
<div align="center"><input type="button" id="btn" value="Submit"></div>
<table height="30px">
    <tr>
        <td></td>
    </tr>
    <hr width="60%"><!--分割线-->
</table>
<table align="center" width="50%" id="emptable" border="1">
    <tr style="font-weight:bolder"><!--设置文字粗细-->
        <td align="center">Name</td>
        <td align="center">Email</td>
        <td align="center">Salary</td>
        <td>&nbsp;&nbsp;</td>
    </tr>
</table>
</body>
</html>

2. 运行结果：