[英]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行, 但是从每个输入字段中我只需要一行。
只需执行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>
您可以尝试以下操作:
$('.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>
试试这个,希望这对您有用。
$('.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>
尝试这个:
$('.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;
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.