自定义属性-模态框的改进

1. 用this的话，跟顺序和索引就没有任何关系了，完全就是用属性绑定的。

如果要增加新的列的话，JS里面不需要做任何调整。

模态框程序如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.hide{display:none;}.model{position:fixed;top:50%;left:50%;width:500px;height:400px;margin-left:-250px;margin-top:-250px;background-color:#eeeeee;z-index:10;}.shadow{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0.6;background-color:black;z-index:9;}</style>
</head>
<body><a οnclick="addElement();">添加</a><table border="1px"><tr><td target="hostname">1.1.1.11</td><td target="port">80</td><td><a class="edit">编辑</a> | <a>删除</a></td></tr><tr><td target="hostname">1.1.1.12</td><td target="port">80</td><td><a class="edit">编辑</a> | <a>删除</a></td></tr><tr><td target="hostname">1.1.1.13</td><td target="port">80</td><td><a class="edit">编辑</a> | <a>删除</a></td></tr></table><div  class="model hide"><div><input name="hostname" type="text"/><input name="port" type="text"/><input type="text"/></div><div><input type="button" value="取消" οnclick="cancelModel();"/></div></div><div class="shadow hide"></div><script src="jquery-1.12.4.js"></script><script>function addElement(){//$('.model').removeClass('hide');//$('.shadow').removeClass('hide');$('.model,.shadow').removeClass('hide');}function cancelModel(){$('.model,.shadow').addClass('hide');$('.model input[type="text"]').val("");}$('.edit').click(function(){$('.model,.shadow').removeClass('hide');//this 代指当前点击的标签var tds=$(this).parent().prevAll();tds.each(function(){//this,代指当前每个td;获取td的target属性值var n=$(this).attr('target');//获取td中的内容var text=$(this).text();var a1='.model input[name="';var a2='"]';var tmp=a1+n+a2;$(tmp).val(text);})});</script></body>
</html>

或者直接写成一串：

            tds.each(function(){var n=$(this).attr('target');var text=$(this).text();$('.model input[name="'+n+'"]').val(text);

字符串的拼接：'.model input[name=" ' +n + ' "] '

说明及解释如下：

                var n=$(this).attr("target"); //port,hostnameconsole.log(n);var text=$(this).text(); //80,1.1.1.11console.log(text);

转载于:https://www.cnblogs.com/momo8238/p/7467249.html

自定义属性-模态框的改进相关推荐

详细介绍React模态框组件react-modal
1,介绍该组件实现了模态框的一些效果. 这是react-modal官网的配置参数. 模态框的手动实现,并不算太难,这个组件用着还不错. 2,配置参数介绍 import React, { Compon ...
Bootstrap系列之模态框（Modal）
文章の目录 1.工作原理 2.示例 2.1.Modal组件 2.2.在线演示 2.3.静态背景 2.4.滚动内容 2.5.垂直居中 2.6.提示和弹窗 2.7.使用网格 2.8.不同模态框的内容 2. ...
bootstrap模态框显示控制
默认模态框弹出后,点击背景蒙层部分弹框会消失,如要解决,需要在模态框属性中加 aria-hidden="true" data-backdrop="static" ...
BootStrap 模态框禁用空白处点击关闭
转自(http://www.cnblogs.com/DayDreamEveryWhere/p/4550320.html) 模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处..... ...
28 模态框拖动案例
1.模态框拖拽案例模态框也称为弹出框. 功能需求: 点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层,可以按 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
js实现模态框点击空白关闭
面试的时候被问到了,这个问题我在网上一直没搜索到.不过bootstrap已经实现了. 在学习js事件委托的时候.想到可以解决这个问题. 在document添加点击监听,利用事件的捕获和冒泡,界面上的点 ...
模态框之Uncaught Error: Syntax error, unrecognized expression:
网页源码: <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3. ...
模态框在IE下的问题，即position:fixed在IE下不兼容的处理方式
项目中遇到的问题,模态框在IE下总出现如图所示双层遮罩框,经排查发现是由于bootstrap里写的modal的样式里position:fixed不兼容IE的原因,导致铺不满整个窗口. 解决方案:在项目 ...

自定义属性-模态框的改进

自定义属性-模态框的改进相关推荐

最新文章

热门文章