Question

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

Answer 1

我明白你要做什么。您可以尝试使用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();，但要注意跨浏览器问题。

逐个在表中追加行

1 个答案: