<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> <input type="text" placeholder="请输入姓名" id="xingming"> <br/><br/> <label style="background:#808080;">性别:</label> <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>
js利用数组进行增删改查,添加和更新有弹窗
最新推荐文章于 2024-06-12 10:52:36 发布