jquery给表格绑值
-
直接上代码了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理系统文件服务器配置</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/fenye.css" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="../css/font.css"> <link rel="stylesheet" href="../css/xadmin.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css"> <link rel="stylesheet" href="../css/backStage.css"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script> <script src="../lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="../js/xadmin.js"></script> <script type="text/javascript" src="../js/card.js"></script> <script type="text/javascript" src="../js/index_Click.js"></script> <script src="../js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/quanxuan.js"></script> <script> var ComputerIP = "192.168.1.10"; function getJson() { var str; var pageCount; var pageIndex = $("#pageIndex").val(); var fileDomain = $("#fileDomain").val(); var fileIp = $("#fileIp").val(); $.ajax({ url: "http://" + ComputerIP + "/huayin/pageFileServerConfiguration.do", type: "post", dataType: "json", data: { "pageIndex": pageIndex, "fileDomain": fileDomain, "fileIp": fileIp }, success: function(result) { console.log(result); pageCount = result.page.pageCount; var workstr = "<a title='编辑' href='javascript:;' onclick='member_edit_file(this,1)' class='ml-5' style='text-decoration:none'><i class='layui-icon'></i></a><a title='删除' href='javascript:;' onclick='member_del_file(this,1)' style='text-decoration:none'><i class='layui-icon'></i></a>"; for(var i = 0; i < result.pList.length; i++) { str += "<tr><td><input type='checkbox'></td><td style='display: none;'>" + result.pList[i].fileId + "</td><td>" + result.pList[i].fileDomain + "</td><td>" + result.pList[i].fileIp + "</td><td>" + result.pList[i].filePath + "</td><td>" + result.pList[i].filePathFtp + "</td><td class='td-manage'>" + workstr + "</td></tr>"; } $("#filetable tr:gt(0)").remove() //移除第一行以后的数据 $("#filetable").append(str) //追加 } }); //首页 $("#sy").click(function() { //alert(1); $("#pageIndex").val(1); getJson(); }); //上一页 $("#syy").click(function() { //alert(2); var index = $("#pageIndex").val(); if(index != 1) { $("#pageIndex").val(parseInt(index) - 1); } getJson(); }); //下一页 $("#xyy").click(function() { //alert(3); var index = $("#pageIndex").val(); if(parseInt(index) < pageCount) { $("#pageIndex").val(parseInt(index) + 1); getJson(); } else { layer.msg('已经是最后一页了'); } }); //尾页 $("#wy").click(function() { //alert(4); var index = $("#pageIndex").val(); $("#pageIndex").val(pageCount); getJson(); }); } $(function() { getJson(); //搜索数据共有多少条 $.ajax({ url: "http://" + ComputerIP + "/huayin/countFileServerConfiguration.do", type: "post", dataType: "json", data: {}, success: function(result) { console.log(result); var countstr = "共有数据：" + result + " 条"; $("#count").text(countstr); } }); $("#btnQuery").click(function() { getJson(); }); }); </script> <!--<script type="text/javascript"> //反选 function toggle() { //得到所有标签名为input的元素 var y = document.getElementsByTagName("input"); //alert(y.length); //循环出每个元素 for(var i = 0; i < y.length; i++) { //如果元素的类型为checkbox,就反选 if(y[i].type == "checkbox") { y[i].checked = !y[i].checked; } } } //全选 function selAll() { //得到所有标签名为input的元素 var y = document.getElementsByTagName("input"); //alert(y.length); //循环出每个元素 for(var i = 0; i < y.length; i++) { //如果元素的类型为checkbox,就全选 if(y[i].type == "checkbox") { y[i].checked = true; } } } //全不选 function noselAll() { //得到所有标签名为input的元素 var y = document.getElementsByTagName("input"); //alert(y.length); //循环出每个元素 for(var i = 0; i < y.length; i++) { //如果元素的类型为checkbox,就全不选 if(y[i].type == "checkbox") { y[i].checked = false; } } } </script>--> </head> <body> <div> <!-- 作者：2601263363@qq.com 时间：2018-11-02 描述：顶部搜索框 --> <form class="layui-form xbs" action=""> <div class="layui-form-pane" style="text-align: center;"> <div class="layui-form-item" style="display: inline-block;"> <label for="L_email" class="layui-form-label">域名：</label> <div class="layui-input-inline"> <input type="text" name="fileDomain" id="fileDomain" placeholder="请输入域名" autocomplete="off" class="layui-input"> </div> <label for="L_email" class="layui-form-label">IP地址：</label> <div class="layui-input-inline"> <input type="text" name="fileIp" id="fileIp" placeholder="请输入IP地址" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <button class="layui-btn" id="btnQuery" lay-filter="sreach" type="button"><i class="layui-icon"></i></button> <button class="layui-btn" type="reset">重置</button> </div> <input type="hidden" name="pageIndex" id="pageIndex" value="1" /> </div> </div> </form> <xblock> <a href="javascript:"><button class="layui-btn" onclick="selAll();">全选</button></a> <a href="javascript:"><button class="layui-btn" onclick="noselAll();">取消全选</button></a> <a href="javascript:"><button class="layui-btn layui-btn-danger" id="del">删除</button></a> <a href="add_file_base.html"><button class="layui-btn">添加</button></a> <span class="x-right" style="line-height:40px" id="count"></span> </xblock> <table class="layui-table" id="filetable"> <!-- 作者：2601263363@qq.com 时间：2018-11-02 描述：表头 --> <thead> <tr> <th> 选择 </th> <th> 域名 </th> <th> IP地址 </th> <th> 存放目录 </th> <th> FTP目录 </th> <th> 操作 </th> </tr> </thead> <!-- 作者：2601263363@qq.com 时间：2018-11-02 描述：第一行 --> <tbody> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> www.baidu.com </td> <td> 192.168.1.2 </td> <td> ../images/pohoto </td> <td> ../images/pohoto </td> <td class="td-manage"> <a style="text-decoration:none" onclick="member_stop(this,'10001')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a> <a title="编辑" href="update_file_base.html" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <!--<a style="text-decoration:none" onclick="member_password('修改密码','member-password.html','10001','600','400')" href="javascript:;" title="修改密码"> <i class="layui-icon"></i> </a>--> <!--<a title="删除" href="javascript:;" onclick="member_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a>--> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> www.baidu.com </td> <td> 192.168.1.2 </td> <td> ../images/pohoto </td> <td> ../images/pohoto </td> <td class="td-manage"> <a style="text-decoration:none" onclick="member_stop(this,'10001')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a> <a title="编辑" href="update_file_base.html" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <!--<a style="text-decoration:none" onclick="member_password('修改密码','member-password.html','10001','600','400')" href="javascript:;" title="修改密码"> <i class="layui-icon"></i> </a>--> <!--<a title="删除" href="javascript:;" onclick="member_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a>--> </td> </tr> </tbody> </table> <!--分页--> <div class="fenye" style="float: right;"> <ul> <a href="javascript:;" id="sy"> <li style="color: #F2F2F2;">首页</li> </a> <li id="syy" style="color: #F2F2F2;">上一页</li> <!--<li class="xifenye" id="xifenye"> <a id="xiye">1</a>/ <a id="mo">66</a> <div class="xab" id="xab" style="display:none"> <ul id="uljia"> </ul> </div> </li>--> <li id="xyy" style="color: #F2F2F2;">下一页</a> </li> <li id="wy" style="color: #F2F2F2;">尾页</li> </ul> </div> </div> <script> var ComputerIP = "192.168.1.10"; // 删除 $("#del").click(function(){ var arr=[]; var arrne=[]; var id=null; arr=$("input[type=checkbox]"); for(var i=0;i<arr.length;i++){ if(arr[i].checked==true){ num=arr[i]; id=num.parentNode.nextElementSibling.innerText; arrne.push(id); $.ajax({ url: "http://" + ComputerIP + "/huayin/batchFileServerConfigurationDeletes.do", type: "post", dataType: "json", data: { "delitems": arrne.toString() }, success: function(result) { console.log(result); history.go(0); } }); num.parentNode.parentNode.parentNode.removeChild(num.parentNode.parentNode); } } }) /*编辑按钮*/ function member_edit_file(obj, id) { // 获取点中行的id v = $(obj).parent().parent().children().eq(1).text(); window.sessionStorage.setItem("member_edit_file_id", v); location.href = "update_file_base.html"; } /*删除按钮弹窗提示*/ function member_del_file(obj, id) { var v; $("#filetable tr").click(function() { // 获取点中行的id v = $(this).children().eq(1).text().trim(); //alert(v); console.log(v); }) //询问框 layer.confirm('您确定要删除该合作伙伴！', { btn: ['确定', '取消'] //按钮 }, function() { //调用ajax进行删除 //alert(v); $.ajax({ url: "http://" + ComputerIP + "/huayin/deleteFileServerConfiguration.do", type: "post", dataType: "json", data: { "id": v }, success: function(result) { if(result == 1) { layer.msg('操作成功'); history.go(0); } } }); }, function() { }); } </script> </body> </html>