jQuery如何修改模态对话框的内容
2018-11-29 · 品牌创于1988，专注IT教育
江西新华电脑学院
江西新华电脑学院开设电子商务、软件开发、电竞、动漫设计、UI设计、室内设计、网络工程、互联网财务、VR等专业。 来校参观报销路费，报名享受国家学费减免政策，签订就业合同，毕业推荐高薪工作。
向TA提问
关注
![]()
展开全部
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hidden{
display:none;
}
.modal{
position:fixed;
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: white;
z-index:10;
}
.shadow{
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:0.5;
background-color:black;
z-index: 9;
}
</style>
</head>
<body>
<input onclick="add()" type="button" value="添加"/>
<table border="1" width="200px " id="tb">
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td target="seq">1</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">82</td>
<td target="seq">2</td>
<td>
<a id='i2' class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">84</td>
<td target="seq">3</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hidden">
<div id="modal1">
<input name="hostname" type="text"/>
<input name="port" type="text"/>
<input name="seq" type="text"/>
</div>
<div>
<input type="button" value="取消"/>
<input type="button" value="确认" />
</div>
</div>
<div class="shadow hidden"></div>
<script src="jquery-1.12.4.js"></script>
<script>
function add() {
$('.modal,.shadow').removeClass('hidden');
$('.modal input[value="确认"]').off().on('click',function(){
//我的理解：
var hostname = $("#modal1 input[name='hostname']").val();
var port = $("#modal1 input[name='port']").val();
var seq = $("#modal1 input[name='seq']").val();
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = hostname;
td1.setAttribute('target','hostname');
$(tr).append(td1);
// console.log(tr);
var td2 = document.createElement('td');
td2.innerHTML = port;
td2.setAttribute('target','port');
$(tr).append(td2);
var td3 = document.createElement('td');
td3.innerHTML = seq;
td3.setAttribute('target','seq');
$(tr).append(td3);
var td4 = document.createElement('td');
td4.innerHTML = '<a class="edit">编辑</a> | <a class="del">删除</a>';
// $(td4).children('[class="edit"]').attr('onclick','func()'); // 用这种$('.edit').click(function() 绑定click事件，新加的点击编辑没有用，需要添加onclick才有用或直接用$('.c').delegate('a', 'click', function(){
$(tr).append(td4);
$('#tb').append(tr);
})
}
//点击edit
// $('table').delegate('a','click',function(){ 不能写$('tb') 因为这是table下的a标签添加点击功能，而这个table是固定的。而写成tr，tr是新加入的，这样就找不到a标签
$('table').delegate('a','click',function(){
//点击编辑，出现模态框
$(this).css('color','red');
$('.modal,.shadow').removeClass('hidden');
var tds = $(this).parent().prevAll(); //this：有编辑的a标签；获取到同一个tr下的所有td
//将表格中的值输入到模态框
tds.each(function(){
var val = $(this).attr('target'); //this ：当前td；（作用域，此this不同于上个this） val：当前td的target值
var txt = $(this).text();
$('.modal input[name="' + val + '"]').val(txt); //将内容添加到modal的input框中
})
$('.modal input[value="确认"]').off().on('click',function(){confirm(tds)});
// var host = $(tds[1]).text(); //tds[1] 会变成dom对象
// var port = $(tds[0]).text();
//将选中编辑的对话框的元素放入到input中
// $("input[name='hostname']").val(host);
// $("input[name='port']").val(port);
//点击确认，将修改过得值重新赋值给表格
function confirm(self){
var hostname = $("#modal1 input[name='hostname']").val();
var port = $("#modal1 input[name='port']").val();
var seq = $("#modal1 input[name='seq']").val();
console.log(11111);
self.eq(0).text(seq); // eq(0) 对应的是seq
self.eq(1).text(port);
self.eq(2).text(hostname);
}
})
// 点击删除
// $('.del').click(function() {
// $(this).parent().parent().remove();
// })
//点击取消，去除input框中的内容
$('.modal input[value="取消"]').click(function(){
$(".modal input[type='text']").val("");
$('.modal,.shadow').addClass('hidden');
})
function func() {
//点击编辑，出现模态框
$('.modal,.shadow').removeClass('hidden');
}
</script>
</body>
</html>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hidden{
display:none;
}
.modal{
position:fixed;
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: white;
z-index:10;
}
.shadow{
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:0.5;
background-color:black;
z-index: 9;
}
</style>
</head>
<body>
<input onclick="add()" type="button" value="添加"/>
<table border="1" width="200px " id="tb">
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td target="seq">1</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">82</td>
<td target="seq">2</td>
<td>
<a id='i2' class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">84</td>
<td target="seq">3</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hidden">
<div id="modal1">
<input name="hostname" type="text"/>
<input name="port" type="text"/>
<input name="seq" type="text"/>
</div>
<div>
<input type="button" value="取消"/>
<input type="button" value="确认" />
</div>
</div>
<div class="shadow hidden"></div>
<script src="jquery-1.12.4.js"></script>
<script>
function add() {
$('.modal,.shadow').removeClass('hidden');
$('.modal input[value="确认"]').off().on('click',function(){
//我的理解：
var hostname = $("#modal1 input[name='hostname']").val();
var port = $("#modal1 input[name='port']").val();
var seq = $("#modal1 input[name='seq']").val();
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = hostname;
td1.setAttribute('target','hostname');
$(tr).append(td1);
// console.log(tr);
var td2 = document.createElement('td');
td2.innerHTML = port;
td2.setAttribute('target','port');
$(tr).append(td2);
var td3 = document.createElement('td');
td3.innerHTML = seq;
td3.setAttribute('target','seq');
$(tr).append(td3);
var td4 = document.createElement('td');
td4.innerHTML = '<a class="edit">编辑</a> | <a class="del">删除</a>';
// $(td4).children('[class="edit"]').attr('onclick','func()'); // 用这种$('.edit').click(function() 绑定click事件，新加的点击编辑没有用，需要添加onclick才有用或直接用$('.c').delegate('a', 'click', function(){
$(tr).append(td4);
$('#tb').append(tr);
})
}
//点击edit
// $('table').delegate('a','click',function(){ 不能写$('tb') 因为这是table下的a标签添加点击功能，而这个table是固定的。而写成tr，tr是新加入的，这样就找不到a标签
$('table').delegate('a','click',function(){
//点击编辑，出现模态框
$(this).css('color','red');
$('.modal,.shadow').removeClass('hidden');
var tds = $(this).parent().prevAll(); //this：有编辑的a标签；获取到同一个tr下的所有td
//将表格中的值输入到模态框
tds.each(function(){
var val = $(this).attr('target'); //this ：当前td；（作用域，此this不同于上个this） val：当前td的target值
var txt = $(this).text();
$('.modal input[name="' + val + '"]').val(txt); //将内容添加到modal的input框中
})
$('.modal input[value="确认"]').off().on('click',function(){confirm(tds)});
// var host = $(tds[1]).text(); //tds[1] 会变成dom对象
// var port = $(tds[0]).text();
//将选中编辑的对话框的元素放入到input中
// $("input[name='hostname']").val(host);
// $("input[name='port']").val(port);
//点击确认，将修改过得值重新赋值给表格
function confirm(self){
var hostname = $("#modal1 input[name='hostname']").val();
var port = $("#modal1 input[name='port']").val();
var seq = $("#modal1 input[name='seq']").val();
console.log(11111);
self.eq(0).text(seq); // eq(0) 对应的是seq
self.eq(1).text(port);
self.eq(2).text(hostname);
}
})
// 点击删除
// $('.del').click(function() {
// $(this).parent().parent().remove();
// })
//点击取消，去除input框中的内容
$('.modal input[value="取消"]').click(function(){
$(".modal input[type='text']").val("");
$('.modal,.shadow').addClass('hidden');
})
function func() {
//点击编辑，出现模态框
$('.modal,.shadow').removeClass('hidden');
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
