主要用到,$('#i1').each(),标签里绑定函数可传参数this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > .hide{ display: none; } .zhezhao{ z-index: 99; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.6; } .motai{ width: 500px; height: 300px; position: fixed; background-color: white; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; z-index: 100; } </ style > </ head > < body > < div class="zhezhao hide"></ div > < div class="motai hide"> < table id="tb2" border="1"> < thead >< tr >< th >IP</ th >< th >端口</ th >< th >操作</ th ></ tr ></ thead > < tr >< td >< input target="ip" type="text" value=""></ td >< td >< input target="port" type="text" value=""></ td >< td >< a id="submit">确定</ a >|< a id="cancel">取消</ a ></ td ></ tr > </ table > </ div > < div style="margin: 0 auto;width: 500px;height: 800px;"> < input type="button" value="添加" onclick="addTr();"/> < table id="tb1" border="1"> < thead > < tr >< th >选择</ th >< th >IP</ th >< th >端口</ th >< th >操作</ th ></ tr > </ thead > < tbody > < tr >< td target="checkbox">< input type="checkbox"/></ td >< td target="ip">1.1.1.1</ td >< td target="port">80</ td >< td >< a target="modify" onclick="modifyTr(this)">编辑</ a >|< a target="del" onclick="delTr(this)">删除</ a ></ td ></ tr > < tr >< td target="checkbox">< input type="checkbox"/></ td >< td target="ip">1.1.1.2</ td >< td target="port">81</ td >< td >< a target="modify" onclick="modifyTr(this)">编辑</ a >|< a target="del" onclick="delTr(this)">删除</ a ></ td ></ tr > < tr >< td target="checkbox">< input type="checkbox"/></ td >< td target="ip">1.1.1.3</ td >< td target="port">82</ td >< td >< a target="modify" onclick="modifyTr(this)">编辑</ a >|< a target="del" onclick="delTr(this)">删除</ a ></ td ></ tr > < tr >< td target="checkbox">< input type="checkbox"/></ td >< td target="ip">1.1.1.4</ td >< td target="port">83</ td >< td >< a target="modify" onclick="modifyTr(this)">编辑</ a >|< a target="del" onclick="delTr(this)">删除</ a ></ td ></ tr > </ tbody > </ table > </ div > < script src="jquery-3.3.1.js"></ script > < script > function addTr() { $('.zhezhao,.motai').removeClass('hide'); index = -1; //标签为空时,模态框提交是新增 } function modifyTr(self) { $('.zhezhao,.motai').removeClass('hide'); var tds = $(self).parent().prevAll(); index = $(self).parent().parent().index(); //记录当前索引,方便修改后提交调用 tds.each(function () { var target = $(this).attr('target'); var value = $(this).text(); console.log(target,value); $('#tb2 input[target="'+target+'"]').val(value); }); // 以上函数,实现按表格列数里的属性target来对应弹出的模态框表格target,依次到tds里的值去填tb2上对应的框 } function delTr(self) { $(self).parent().parent().remove(); } $('#tb2 #submit').click(function () { var ip = $('#tb2 input[target="ip"]').val(); var port = $('#tb2 input[target="port"]').val(); if(index != -1){ $('#tb1 td[target="ip"]').eq(index).text(ip); $('#tb1 td[target="port"]').eq(index).text(port); }else { var tag = '< tr >< td target="checkbox">< input type="checkbox"/></ td >< td target="ip">'+ip+'</ td >< td target="port">'+port+'</ td >< td >< a target="modify" onclick="modifyTr(this)">编辑</ a >|< a target="del" onclick="delTr(this)">删除</ a ></ td ></ tr >' $('#tb1 tbody').append(tag); } $('.motai,.zhezhao').addClass('hide'); }); $('#tb2 #cancel').click(function () { $('.zhezhao').addClass('hide'); $('.motai').addClass('hide'); }); </ script > </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步