逐个在表中追加行

时间:2017-05-11 13:27:36

标签: javascript jquery

我想逐行将行追加到表中,而不是一次追加。我面临的问题是,不。行数非常大,比如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>

1 个答案:

答案 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();,但要注意跨浏览器问题。