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>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

4条回答默认最新

CSDN专家-showbo 2021-07-05 16:37

关注

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>