当表在循环中迭代时,需要在ajax调用期间逐个更新表单元格

时间:2014-06-16 09:37:20

标签: javascript jquery ajax html5

//示例代码: 当我从ajax调用得到响应时,我需要在html表中逐行更新每行的状态,但是当所有ajax请求完成时状态单元会更新。我不想要所有的细胞立即更新。

<script>
 for(var i=0;i< count;i++)
{

 $.ajax({
      url: 'example.php',
      type: 'POST',
      async : false,
      data: {test:test},
     success: function (data) { 
             $("#"+i).html("updated");
           }
   });
}
</script>
 <html>
    <table>
       <thead>
          <tr>
           <th>Name</th>
           <th>Address</th>
           <th>Status</th>
          </tr>
       </thead>
       <tbody>
        <tr><td>Xavier</td><td>London</td><td><span id=0>Pending</span></td></tr>
        <tr><td>Jhon</td><td>NY</td><td><span id=1>Pending</span></td></tr>
         <tr><td>Sam</td><td>LA</td><td><span id=2>Pending</span></td></tr>
       </tbody>




  </table>
</html>

输出应为:

Name      Address       Status

Xavier    London        Updated

John      NY            Pending

Sam       LA           Pending

1 个答案:

答案 0 :(得分:0)

如果您不想立即更新整个行,请为每行调用ajax函数。当您从&#34; example.php&#34;中返回一行时显示它然后再次调用ajax并返回下一行。