js利用数组进行增删改查，添加和更新有弹窗

最新推荐文章于 2024-06-12 10:52:36 发布
漫随天外tian
最新推荐文章于 2024-06-12 10:52:36 发布
阅读量819
点赞数 1
分类专栏： js 文章标签： js
本文链接：https://blog.csdn.net/kingStormQueen/article/details/80611556
版权
js 专栏收录该内容
15 篇文章 0 订阅
订阅专栏
<html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<head>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <style>
       .Tin{
            width:90px;
        }
        .w80{
            width:80px;
        }

    </style>

    <script type="text/javascript">
        // var table1=document.getElementById('table1');
        // var table2=document.getElementById('table2');
        var arr = [[1, "E", "123", "旅游、爱好"], [2, "A", "123", "旅游、爱好"], [3, "B", "123", "旅游、爱好"], [4, "C", "123", "旅游、爱好"], [5, "D", "123", "旅游、爱好"]];

        //查询数据
        function tijiao() {
            var xingming = $("#xingming").val();
            var arr2;
            for (var i = 0; i < arr.length; i++) {
                for (var j = 1; j < arr[i].length; j++) {
                    if (arr[i][j] == xingming) {
                        arr2 = arr[i]
                    };
                }
            }
            var x = document.getElementById('table1').insertRow(1);
            for (var z = 0; z < arr2.length; z++) {
                // alert(z);
                x.insertCell(z).innerHTML = arr2[z];
            }
            x.insertCell(arr2.length).innerHTML = "<input type=\"button\" value=\"修改\" class=\"clickInput\" οnclick='showDialog2(this);'><input class=\"deleteT\" type=\"button\" value=\"删除\" οnclick=\"deleteT(this)\">";
        }

        //隐藏弹窗
        $(function () {
            $("#dialogId").hide();
            $("#dialogId2").hide();
        });

        //添加的弹窗
        function showDialog() {
            //去除弹窗缓存
            var dialogParent = $("#dialogId").parent();
            var dialogOwn = $("#dialogId").clone();
            dialogOwn.hide();
            $("#dialogId").dialog({
                height: 400,
                width: 400,
                // 模态开启
                modal: true,
                // 是否可拖拽
                draggable: true,
                // 最小宽度
                minWidth: 300,
                buttons: {},
                close: function () {
                    // 2.在close时将克隆的div重新append到页面上
                    dialogOwn.appendTo(dialogParent);
                    // 3.清除缓存 连同Dialog中的DIV也同时清除
                    $(this).dialog("destroy").remove();
                },
            });
        }

        //保存数据
        function baocun() {
            var xuhao1 = $("#xuhao1").val();
            var xingming1 = $("#xingming1").val();
            var shenfenzhenghao1 = $("#shenfenzhenghao1").val();
            var aihao1 = $("#aihao1").val();
            var arr3 = new Array();
            arr3[0] = xuhao1;
            arr3[1] = xingming1;
            arr3[2] = shenfenzhenghao1;
            arr3[3] = aihao1;
            arr[5] = arr3;//更新二维数组数据
            var x =document.getElementById('table1').insertRow(1);
            for (var z = 0; z < arr3.length; z++) {
                x.insertCell(z).innerHTML = arr3[z];
            }
            x.insertCell(arr3.length).innerHTML = "<input type=\"button\" value=\"修改\" class='clickInput'  οnclick='showDialog2(this);'><input class=\"deleteT\" type=\"button\" value=\"删除\" οnclick=\"deleteT(this)\">";
            $("#dialogId").dialog("close");
        }

        //更新的弹窗
        function showDialog2(obj) {
            var index = obj.parentNode.parentNode.rowIndex;//获取当前的行号
            //去除弹窗缓存
            var dialogParent = $("#dialogId2").parent();
            var dialogOwn = $("#dialogId2").clone();
            dialogOwn.hide();
            //获取当前行的数据，存入数组中
            var arr4 = new Array();
            for (i = 0; i < 4; i++) {
                arr4[i] = table1.rows[index].cells[i].innerHTML;
            }

            $("#dialogId2").dialog({
                height: 400,
                width: 400,
                // 模态开启
                modal: true,
                // 是否可拖拽
                draggable: true,
                // 最小宽度
                minWidth: 300,
                buttons: {},
                close: function () {
                    // 2.在close时将克隆的div重新append到页面上
                    dialogOwn.appendTo(dialogParent);
                    // 3.清除缓存 连同Dialog中的DIV也同时清除
                    $(this).dialog("destroy").remove();
                },
            });
            //将要更新的数据显示到表格中
            var x = document.getElementById('table2').insertRow(1);
            for (var z = 0; z < arr4.length; z++) {
                x.insertCell(z).innerHTML = "<input class=\"Tin\" type=\"text\" value=\"\">";
                $(".Tin").eq(z).val(arr4[z]);
            }
            document.getElementById('table1').deleteRow(index);//删除更新之前行
        }

        //更新数据
        function baocun2() {
            var xuhao2 = $(".Tin").eq(0).val();
            var xingming2 = $(".Tin").eq(1).val();
            var shenfenzhenghao2 = $(".Tin").eq(2).val();
            var aihao2 = $(".Tin").eq(3).val();

            var arr5 = new Array();
            arr5[0] = xuhao2;
            arr5[1] = xingming2;
            arr5[2] = shenfenzhenghao2;
            arr5[3] = aihao2;

            //arr[5]=arr3;//更新二维数组数据
            var x = table1.insertRow(1);
            for (var z = 0; z < arr5.length; z++) {
                x.insertCell(z).innerHTML = arr5[z];
            }
            x.insertCell(arr5.length).innerHTML = "<input type=\"button\" value=\"修改\" class='clickInput'  οnclick='showDialog2(this);'><input class=\"deleteT\" type=\"button\" value=\"删除\" οnclick=\"deleteT(this)\">";
            $("#dialogId2").dialog("close");
        }

        //删除数据
        function deleteT(obj) {
            var index = obj.parentNode.parentNode.rowIndex;
            document.getElementById('table1').deleteRow(index);
        }
    </script>

</head>
<body>
<div style="margin:0 auto;width:600px;">
    <h2>查询区域</h2>
    <form method="post">
        <label style="background:#808080;">姓名：</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="请输入姓名"
                                                                               id="xingming">
        <br/><br/>
        <label style="background:#808080;">性别：</label>&nbsp;&nbsp;&nbsp;
        <select style="width:170px" id="xingbie">
            <option value="全部" selected>全部</option>
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <br/><br/>
        <input type="button" value="提交" οnclick="tijiao()">
        <input type="reset" value="重置">
    </form>
</div>
<br/>
<br/>
<br/>
<-------------------------------------------------------------------------------->

<div style="margin:0 auto;width:600px;">
    <h2>查询列表</h2>

    <a href="#" style="margin-left:220px;"><input type="button" value="添加" οnclick='showDialog();'></a>

    <table border="1" cellspacing="0" style="text-align:center" id="table1">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>身份证号</td>
            <td>爱好</td>
            <td style="width:80px">操作</td>
        </tr>
    </table>
</div>
<--------------------------------------------------------------------->
<div id="dialogId" title="新增">
    <%--<h2>新增/修改区域</h2>--%>
    <div>
        <form method="post" action="">
            <table border="0" cellspacing="0" style="width:380px;border-collapse:separate; border-spacing:0px 10px;" >
                <tr>
                    <td class="w80">序号:</td>
                    <td><input type="text" id="xuhao1"></td>
                </tr>
                <tr>
                    <td class="w80">姓名:</td>
                    <td><input type="text" id="xingming1"></td>
                </tr>
                <tr>
                    <td class="w80">身份证号:</td>
                    <td><input type="text" id="shenfenzhenghao1"></td>
                </tr>
                <tr>
                    <td class="w80">爱好:</td>
                    <td><textarea id="aihao1" style="width:200px;height:100px;"></textarea></td>
                </tr>
                <tr>
                    <td colspan="4"><input type="button" value="保存" οnclick="baocun()" style="margin-left: 120px;"> <input type="reset" value="重置">
                    </td>
                </tr>

            </table>
        </form>
    </div>

</div>

<div id="dialogId2" title="修改">
    <%--<h2>新增/修改区域</h2>--%>
    <div>
        <form method="post" action="">
            <table border="0" cellspacing="0" style="width:380px;border-collapse:separate; border-spacing:0px 10px;" id="table2">
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>身份证号</td>
                    <td>爱好</td>
                </tr>
                <tr>
                    <td colspan="4"><input type="button" value="保存" οnclick="baocun2()" style="margin-left: 120px;"> <input type="reset" value="重置">
                    </td>
                </tr>

            </table>
        </form>
    </div>

</div>
</body>
</html>
漫随天外tian
关注
1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js利用数组进行增删改查，添加和更新有弹窗

&lt;html&gt;&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;META HTTP-EQUIV="Pra
复制链接

扫一扫
专栏目录