我想逐行将行追加到表中,而不是一次追加。我面临的问题是,不。行数非常大,比如10,000。它在循环终止后立即追加所有行。我想让它像每次迭代一样工作,它应该将行附加到表中。
$(document).ready(function(){
for(var i=0;i<1000;i++){
var name = "name "+i;
var email = "email"+i+"@vvv.com";
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
//$("table tbody").append(markup);
//$("tbody").parent("table").append(markup);
$("tbody").after(markup);
}
});
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>Name</td>
<td>email@vvv.com</td>
</tr>
</tbody>
</table>
答案 0 :(得分:0)
我明白你要做什么。您可以尝试使用setTimeout来实现此目的。您正在尝试循环数组,但在您的代码中,您只是生成新行。所以我尝试将代码实现到此解决方案中。如果您尝试循环数组,则需要修改它。
$(document).ready(function(){
appendOneByOne(1000)
});
function appendOneByOne(i){
if(i !== 0){
setTimeout(function(){
var name = "name "+i;
var email = "email"+i+"@vvv.com";
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("tbody").after(markup);
appendOneByOne(--i)
});
}
}
您也可以使用window.requestAnimationFrame();
,但要注意跨浏览器问题。