jQuery如何仅一次将数据附加到循环中

Question

I work with loops and I add data in to table, from buttons. 我使用循环，并通过按钮将数据添加到表中。 So each time it creates 5 cells for me, but I need to append data only one time after button click. 因此，每次为我创建5个单元格，但是我只需要在单击按钮后一次添加数据。

Code: 码：

 $('.next').on('click', function () { $('.changeoverTable').show(); var arrNumber = new Array(); $('input[type=text]').each(function (i) { arrNumber.push($(this).val()); $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + arrNumber[i] + '</td></tr>'); }) });

 body { background: #f5f5f5; } .hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <input type="text" placeholder="Enter number of data"><button class="next">ok</button> <input type="text" placeholder="Enter number of layers"><button class="next">ok</button> <input type="text" placeholder="Enter number of nest"><button class="next">ok</button> <input type="text" placeholder="Enter number of layers"><button class="next">ok</button> <table class="changeoverTable hide"> <thead> <tr> <th colspan="3">Table</th> </tr> </thead> <tbody> </tbody> </table>

As you can see, each time after click ok, i got 5 rows, but i need only one, from each input field. 如您所见，每次单击“确定”后，我都有5行， 但是从每个输入字段中我只需要一行。

Answer 1

Just do a if condition if(arrNumber[i]){ check if value exists. 只需执行if条件if(arrNumber[i]){检查值是否存在。

 $('.next').on('click', function () { $('.changeoverTable').show(); var arrNumber = new Array(); $(".changeoverTable > tbody").html(''); $('input[type=text]').each(function (i) { arrNumber.push($(this).val()); if(arrNumber[i]){ $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + arrNumber[i] + '</td></tr>'); } }) });

 body { background: #f5f5f5; } .hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <input type="text" placeholder="Enter number of data"><button class="next">ok</button> <input type="text" placeholder="Enter number of layers"><button class="next">ok</button> <input type="text" placeholder="Enter number of nest"><button class="next">ok</button> <input type="text" placeholder="Enter number of layers"><button class="next">ok</button> <table class="changeoverTable hide"> <thead> <tr> <th colspan="3">Table</th> </tr> </thead> <tbody> </tbody> </table>

Answer 2

You can try with this: 您可以尝试以下操作：

$('.next').on('click', function() {
  $('.changeoverTable').show();
  $('.changeoverTable tbody tr').remove();
  $('input[type=text]').each(function(i) {
    if ($(this).val()) $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + $(this).val() + '</td></tr>');
  })
});

Please notice that I've added $('.changeoverTable tbody tr').remove(); 请注意，我已经添加了$('.changeoverTable tbody tr').remove(); to remove the old records in the table. 删除表中的旧记录。

Also there is no reason to use an Array for this. 同样也没有理由为此使用Array 。

Demo 演示

 $('.next').on('click', function() { $('.changeoverTable').show(); $('.changeoverTable tbody tr').remove(); $('input[type=text]').each(function(i) { if ($(this).val()) $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + $(this).val() + '</td></tr>'); }) });

 body { background: #f5f5f5; } .hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <input type="text" placeholder="Enter number of data"><button class="next">ok</button> <input type="text" placeholder="Enter number of layers"><button class="next">ok</button> <input type="text" placeholder="Enter number of nest"><button class="next">ok</button> <input type="text" placeholder="Enter number of layers"><button class="next">ok</button> <table class="changeoverTable hide"> <thead> <tr> <th colspan="3">Table</th> </tr> </thead> <tbody> </tbody> </table>

Answer 3

Try this, hope this will works for you. 试试这个，希望这对您有用。

 $('.next').on('click', function () { $('.changeoverTable').show(); var arrNumber = new Array(); var test = $(this).prev('input').val(); console.log('value', test); if(test != ''){ $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + test + '</td></tr>'); }else{ alert('empty data'); } });

 body { background: #f5f5f5; } .hide { display: none; }

 <html lang="en"> <head> <meta charset="UTF-8" /> <title>C3.js</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> </head> <body> <input type="text" placeholder="Enter number of data"><button class="next">ok</button> <input type="text" placeholder="Enter number of layers"><button class="next">ok</button> <input type="text" placeholder="Enter number of nest"><button class="next">ok</button> <input type="text" placeholder="Enter number of layers"><button class="next">ok</button> <table class="changeoverTable hide"> <thead> <tr> <th colspan="3">Table</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>

Answer 4

Try this: 尝试这个：

$('.next').on('click', function () {
    $('.changeoverTable').show();
    var arrNumber = new Array();
    var check=0;
    $('input[type=text]').each(function (i) {
if(check==0){
        arrNumber.push($(this).val());
            $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + 
arrNumber[i] + '</td></tr>');
}
 check=1; 
    })
});

jQuery如何仅一次将数据附加到循环中

问题描述

4 个解决方案

解决方案1
2 已采纳 2019-05-13 07:43:39

解决方案2
1 2019-05-13 07:47:02

解决方案3
1 2019-05-13 07:50:02

解决方案4
0 2019-05-13 07:40:55

jQuery如何仅一次将数据附加到循环中

问题描述

4 个解决方案

解决方案1 2 已采纳 2019-05-13 07:43:39

解决方案2 1 2019-05-13 07:47:02

解决方案3 1 2019-05-13 07:50:02

解决方案4 0 2019-05-13 07:40:55

解决方案1
2 已采纳 2019-05-13 07:43:39

解决方案2
1 2019-05-13 07:47:02

解决方案3
1 2019-05-13 07:50:02

解决方案4
0 2019-05-13 07:40:55