a_gust_wind
2021-07-05 16:32
采纳率: 100%
浏览 98

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>

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

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>
    
    已采纳该答案
    打赏 评论
  • CSDN专家-Tk 2021-07-05 16:50

    这里把
    var info = this[0].innerHTML;
    this[0]调整为this
    var info = this.innerHTML;

    img

    打赏 评论
  • qq_45713941 2021-07-05 16:47

    var info = this[0].innerHTML; 报错 Cannot read property 'innerHTML' of undefined

    打赏 评论
  • 从官网加载的jquery1.0测试你的代码正常的,能正常添加一行~~只能一行。因为newElem为tr dom对象,无论append多少次都是操作同一个tr,所以虽然存在多个重名的记录,但是后续都是append同一个TR,所以只有一条。

    img

    简单示例

    
    <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();}
    })

    打赏 评论

相关推荐 更多相似问题