For the asynchronous tasks generated by the append method and appendChild in jQuery JS, ask Lao to explain

CSDN Q & A 2022-02-13 06:20:43 阅读数:101

asynchronous tasks generated append method

Enter... In the add name input box Tom, Then keep adding , Appear many times confirm Prompt box , Click once , Just do it once console.log(2), But in the middle apppend Was skipped , After the code is executed, you can go back to execute appped, The original karma will skip , Feeling append It becomes an asynchronous task

<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> Entry time </th><th> Wages </th><th> operation </th></tr> <tr><td >Data</td><td>2016-8-10</td><td>2365$</td><td><a href="#"> Delete </a></td></tr> <tr><td >Tom</td><td>2016-8-10</td><td>2365$</td><td><a href="#"> Delete </a></td></tr> <tr><td class="box2">David</td><td>2016-8-10</td><td>2365$</td><td><a href="#"> Delete </a></td></tr> <tr><td >Lisa</td><td>2016-8-10</td><td>2365$</td><td><a href="#"> Delete </a></td></tr> </table> <div id=""> <label for="name"> full name </label> <input type="text" id="name"/><br> <label for="datetime"> Entry time </label> <input type="text" id="datetime" /><br> <label for="salary"> Wages </label> <input type="text" id="salary"/> <input type="button" id="submit1" value=" add to " /> </div> </body></html><script src="jquery-1.0.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> // Operation delete  $('a').click(function(){ let a = confirm(" Are you sure you want to delete "+$(this).parent().siblings(':eq(0)').html()) if(a) {$(this).parent().parent().remove();} }) var a = $('tr').children().filter(':not(:first)'); // Action add  $('#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="#"> Delete </a>'), newaTd = $('<td></td>').append(newa); newElem.append(newaTd); // $('#table1').append(newElem); newa.click(function(){ let a = confirm(" Are you sure you want to delete "+$(this).parent().siblings(':eq(0)').html()) if(a) {$(this).parent().parent().remove();} }) // Determine whether you already have the same name  var a = $('tr').children().filter(':not(:first)'); a.each(function(){ var info = this[0].innerHTML; var n = 0 if(info ===name) { var confir = confirm(" Already there. " + name+" Are you sure to add "); // if(confir){
 // $('#table1')[0].appendChild(newElem[0]);// Pop up the user warning box No implementation  // } var table1 = document.getElementById('table1'); var tr = document.createElement('tr'); // tr.innerHTML = " Where am I " // $('#table1').append(tr) table1.appendChild(newElem[0])// This is where it will be skipped  console.log(1) // return false  } console.log(2) }) // Determine if you have the same name  // for(var i=0,length= a.length;i<length;i++){
 // var info = a[i][0].innerHTML; // if(name===info){
 // let confir = confirm(" Already there. " + name+" Are you sure to add "); // The variable name here cannot take confirm // if(confir){
 // $('#table1')[0].appendChild(newElem[0]);// Pop up the user warning box No implementation  // } // break // } // } //------------ });console.log(a)</script>



Take the answer :

a.each(function () {
var info = this[0].innerHTML;

The above sentence is wrong .this It has been traversed by the current dom object , No jquery object , Unwanted [0] turn dom. Help you to order Adopt 【 Upper right corner 】 Do you , thank you ~

var info = this.innerHTML;

If it's a hand mistake , After you add multiple identical , because each Traversal no return false stop it each Traverse , Therefore, it will match multiple existing with the same name , Output multiple content . Get rid of each In traversal // return false Note to this sentence , So you can stop each Circulated

Change your code , Some can be omitted

<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> Entry time </th><th> Wages </th><th> operation </th></tr> <tr><td>Data</td><td>2016-8-10</td><td>2365$</td><td><a href="#"> Delete </a></td></tr> <tr><td>Tom</td><td>2016-8-10</td><td>2365$</td><td><a href="#"> Delete </a></td></tr> <tr><td class="box2">David</td><td>2016-8-10</td><td>2365$</td><td><a href="#"> Delete </a></td></tr> <tr><td>Lisa</td><td>2016-8-10</td><td>2365$</td><td><a href="#"> Delete </a></td></tr> </table> <div id="dv"> <label for="name"> full name </label> <input type="text" id="name" /><br> <label for="datetime"> Entry time </label> <input type="text" id="datetime" /><br> <label for="salary"> Wages </label> <input type="text" id="salary" /> <input type="button" id="submit1" value=" add to " /> </div></body></html><script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript"> // Operation delete  $(document).on('click', 'a', function () { let a = confirm(" Are you sure you want to delete " + $(this).parent().siblings(':eq(0)').html()) if (a) { $(this).closest('tr').remove(); } }); // Action add  $('#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="#"> Delete </a>'), newaTd = $('<td></td>').append(newa); newElem.append(newaTd); // Determine whether you already have the same name  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(" Already there. " + name + " Are you sure to add ")) return false; $('#table1').append(newElem); $('#dv :text').val(''); });</script>


Other answers 2:

Here is the
var info = this[0].innerHTML;
this[0] Adjusted for this
var info = this.innerHTML;

img


Other answers 3:

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


Other answers 4:

Loaded from the official website jquery1.0 Test your code for normal , Can add a line normally ~~ Only one line . because newElem by tr dom object , No matter what append How many times do you operate the same tr, So although there are multiple records with duplicate names , But the follow-up is append The same TR, So there's only one .

img

A simple example

<div id="div1"> div1</div><div id="div2"> div2</div><script> var el = document.createElement('div'); el.innerHTML = '1111';// here el In memory , Not added to DOM in  div1.appendChild(el);//el Add to DOM in  div1.appendChild(el);// Adding , It's just equivalent to el Delete and then add div1 in , So there's still only one 1111 stay div1 It shows that  setTimeout(function () { div2.appendChild(el) }, 3000)//3s After the el Add to div2, This will be from div1 Delete el,div2 Join in el. // Generally speaking, it is a dom object ,append After other objects , Will be deleted from the original parent node , Then add to other parent nodes .</script>

So your code has multiple duplicate name records , But the operation is the same tr, So there will only be one . There will be multiple , To put the following code into each in , In this way, a new object is created every time , Instead of operating the same

newElem = $(''+name +'' +
'' +datetime+''+
''+salary + ''+''),
newa = $(' Delete '),
newaTd = $('').append(newa);
newElem.append(newaTd);
// $('#table1').append(newElem);
newa.click(function(){
let a = confirm(" Are you sure you want to delete "+$(this).parent().siblings(':eq(0)').html())
if(a) {$(this).parent().parent().remove();}
})

copyright:author[CSDN Q & A],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130620416722.html