jQuery如何僅一次將數據附加到循環中
[英]jQuery how to append data in loop only one time
問題描述
我使用循環，並通過按鈕將數據添加到表中。 因此，每次為我創建5個單元格，但是我只需要在單擊按鈕后一次添加數據。
碼：
$('.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>
如您所見，每次單擊“確定”后，我都有5行， 但是從每個輸入字段中我只需要一行。
4 個解決方案
解決方案1
2 已采納 2019-05-13 07:43:39
只需執行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>
解決方案2
1 2019-05-13 07:47:02
您可以嘗試以下操作：
$('.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>');
})
});
請注意，我已經添加了$('.changeoverTable tbody tr').remove(); 刪除表中的舊記錄。
同樣也沒有理由為此使用Array 。
演示
$('.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>
解決方案3
1 2019-05-13 07:50:02
試試這個，希望這對您有用。
$('.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>
解決方案4
0 2019-05-13 07:40:55
嘗試這個：
$('.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 stringyfy 數據附加到具有 4 個用戶的可編輯（tr 和 td）數據的表中，例如循環
[英]How to append jquery stringyfy data to table with editable (tr and td) data of 4 users one by one like loop
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.