jQuery js中关于append方法和appendchild产生的异步任务,求大lao来讲解下
在添加姓名输入框输入Tom,然后不断添加,出现多次confirm提示框,点击一次,就执行一次console.log(2),但是中间的了apppend被跳过了，代码执行完了才回头来执行appped,原生的业会略过，感觉append变成了异步的任务
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
width: 600px;
margin: auto;
text-align:center;
}
div{
width: 600px;
margin: auto;
}
label{
display: inline-block;
width: 80px;
margin-right: 10px;
}
</style>
</head>
<body>
<table id="table1" border="" cellspacing="0px" cellpadding="2px">
<tr><th>Name</th><th>入职时间</th><th>工资</th><th>操作</th></tr>
<tr><td >Data</td><td>2016-8-10</td><td>2365$</td><td><a href="#">删除</a></td></tr>
<tr><td >Tom</td><td>2016-8-10</td><td>2365$</td><td><a href="#">删除</a></td></tr>
<tr><td class="box2">David</td><td>2016-8-10</td><td>2365$</td><td><a href="#">删除</a></td></tr>
<tr><td >Lisa</td><td>2016-8-10</td><td>2365$</td><td><a href="#">删除</a></td></tr>
</table>
<div id="">
<label for="name">姓名</label>
<input type="text" id="name"/><br>
<label for="datetime">入职时间</label>
<input type="text" id="datetime" /><br>
<label for="salary">工资</label>
<input type="text" id="salary"/>
<input type="button" id="submit1" value="添加" />
</div>
</body>
</html>
<script src="jquery-1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//操作删除
$('a').click(function(){
let a = confirm("确定要删除"+$(this).parent().siblings(':eq(0)').html())
if(a) {$(this).parent().parent().remove();}
})
var a = $('tr').children().filter(':not(:first)');
//操作添加
$('#submit1').click(function(){
var name = $('#name').val(),
datetime = $('#datetime').val(),
salary = $('#salary').val(),
newElem = $('<tr><td>'+name +'</td>' +
'<td>' +datetime+'</td>'+
'<td>'+salary + '</td>'+'</tr>'),
newa = $('<a href="#">删除</a>'),
newaTd = $('<td></td>').append(newa);
newElem.append(newaTd);
// $('#table1').append(newElem);
newa.click(function(){
let a = confirm("确定要删除"+$(this).parent().siblings(':eq(0)').html())
if(a) {$(this).parent().parent().remove();}
})
//判断是否已经有了同样的名
var a = $('tr').children().filter(':not(:first)');
a.each(function(){
var info = this[0].innerHTML;
var n = 0
if(info ===name)
{
var confir = confirm("已经有了" + name+"确认添加么");
// if(confir){
// $('#table1')[0].appendChild(newElem[0]);//弹户警告框 没有执行
// }
var table1 = document.getElementById('table1');
var tr = document.createElement('tr');
// tr.innerHTML = "我在哪啊"
// $('#table1').append(tr)
table1.appendChild(newElem[0])//就是这里会被略过
console.log(1)
// return false
}
console.log(2)
})
//判断是否有了同样的名
// for(var i=0,length= a.length;i<length;i++){
// var info = a[i][0].innerHTML;
// if(name===info){
// let confir = confirm("已经有了" + name+"确认添加么");
//这里的变量名不能取confirm
// if(confir){
// $('#table1')[0].appendChild(newElem[0]);//弹户警告框 没有执行
// }
// break
// }
// }
//------------
});
console.log(a)
</script>
a.each(function () {
var info = this[0].innerHTML;
上面这句报错了。this已经是当前遍历到的dom对象，不是jquery对象，不需要[0]转dom。帮助到你能点个采纳【右上角】吗，谢谢~
var info = this.innerHTML;
如果是手误，你添加多个相同的后，由于each遍历没有return false停止each遍历，所以会匹配已经存在的多个同名的，输出多个内容。去掉each遍历中的// return false 这句的注释，这样就可以停止each循环了
改了下你的代码，有些可以省略
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
width: 600px;
margin: auto;
text-align: center;
}
div {
width: 600px;
margin: auto;
}
label {
display: inline-block;
width: 80px;
margin-right: 10px;
}
</style>
</head>
<body>
<table id="table1" border="" cellspacing="0px" cellpadding="2px">
<tr><th>Name</th><th>入职时间</th><th>工资</th><th>操作</th></tr>
<tr><td>Data</td><td>2016-8-10</td><td>2365$</td><td><a href="#">删除</a></td></tr>
<tr><td>Tom</td><td>2016-8-10</td><td>2365$</td><td><a href="#">删除</a></td></tr>
<tr><td class="box2">David</td><td>2016-8-10</td><td>2365$</td><td><a href="#">删除</a></td></tr>
<tr><td>Lisa</td><td>2016-8-10</td><td>2365$</td><td><a href="#">删除</a></td></tr>
</table>
<div id="dv">
<label for="name">姓名</label>
<input type="text" id="name" /><br>
<label for="datetime">入职时间</label>
<input type="text" id="datetime" /><br>
<label for="salary">工资</label>
<input type="text" id="salary" />
<input type="button" id="submit1" value="添加" />
</div>
</body>
</html>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
//操作删除
$(document).on('click', 'a', function () {
let a = confirm("确定要删除" + $(this).parent().siblings(':eq(0)').html())
if (a) { $(this).closest('tr').remove(); }
});
//操作添加
$('#submit1').click(function () {
var name = $('#name').val(),
datetime = $('#datetime').val(),
salary = $('#salary').val(),
newElem = $('<tr><td>' + name + '</td>' +
'<td>' + datetime + '</td>' +
'<td>' + salary + '</td>' + '</tr>'),
newa = $('<a href="#">删除</a>'),
newaTd = $('<td></td>').append(newa);
newElem.append(newaTd);
//判断是否已经有了同样的名
var a = $('tr:gt(0) td:nth-child(1)'), exist=false;
a.each(function () {
if (this.innerHTML === name) {
exist = true;
return false;
}
});
if (exist&&!confirm("已经有了" + name + "确认添加么")) return false;
$('#table1').append(newElem);
$('#dv :text').val('');
});
</script>
这里把
var info = this[0].innerHTML;
this[0]调整为this
var info = this.innerHTML;
var info = this[0].innerHTML; 报错 Cannot read property 'innerHTML' of undefined
从官网加载的jquery1.0测试你的代码正常的，能正常添加一行~~只能一行。因为newElem为tr dom对象，无论append多少次都是操作同一个tr，所以虽然存在多个重名的记录，但是后续都是append同一个TR，所以只有一条。
简单示例
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
var el = document.createElement('div');
el.innerHTML = '1111';//此时el在内存中，未添加到DOM中
div1.appendChild(el);//el添加到DOM中
div1.appendChild(el);//在添加，只是相当于将el删除后再加入div1中，所以还是只有一个1111在div1中显示
setTimeout(function () { div2.appendChild(el) }, 3000)//3s后将el中添加到div2，此时会从div1删除el，div2加入el。
//总的来说就是一个dom对象，append到其他对象后，会从原来的父节点删除，然后加入到其他父节点中。
</script>
所以你的代码存在多个重名记录，但是操作的是同一个tr，所以只会出现一个。要出现多个，要将下面的代码放到each中，这样每次都是创建新的对象，而不是操作同一个
newElem = $(''+name +'' +
'' +datetime+''+
''+salary + ''+''),
newa = $('删除'),
newaTd = $('').append(newa);
newElem.append(newaTd);
// $('#table1').append(newElem);
newa.click(function(){
let a = confirm("确定要删除"+$(this).parent().siblings(':eq(0)').html())
if(a) {$(this).parent().parent().remove();}
})