Question

我正在尝试实现一项功能，以便新数据显示在新列中，并将其附加到具有淡入效果的行中。

以下是我的代码

JS

<script type="text/javascript">
$(document).ready(function () {
    $.ajax({url:"server.php", success:function(data){     
       $("div").html(data);
       var count = 1;
       var obj = jQuery.parseJSON(data);
       $.each(obj.result, function() {  
           var html = "<td>Hello </td><td>World</td>"; //"<td>"+ this.fruit.apple +"</td><td>hello</td>";
           $(html).hide().appendTo("table tr#cell"+count).fadeIn(1000);
           count += 1;  
       });
    }}); 
});
</script>

HTML

<table border="1">
  <tr id="cell1"><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
  <tr id="cell2"><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
  <tr id="cell3"><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
  <tr id="cell4"><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>
  <tr id="cell5"><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
  <tr id="cell6"><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
  <tr id="cell7"><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
  <tr id="cell8"><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>
  <tr id="cell9"><td>row 9, cell 1</td><td>row 9, cell 2</td></tr>
  <tr id="cell10"><td>row 10, cell 1</td><td>row 10, cell 2</td></td></tr>
</table> 
<div></div>

但问题是World没有按预期工作，并且'World'显示在第一个附加单元格下方，而不是在新列中显示为右侧，因此它看起来像“Hello World”。

我也在寻找可以显示页面的实时html的任何工具，它可以显示jQuery对html所做的所有更改？

**更新我附上了以下图片..它显示'世界'低于'你好'，而它应该在'你好'的右栏（新专栏）中。

哎呀..我不允许发布图片..请查看http://s11.postimage.org/onoxssoab/table.png

Answer 1

我也在寻找可以显示页面的实时html的任何工具，它可以显示jQuery对html所做的所有更改？

如果您安装了浏览器＆＃39; Firefox＆＃39;你可以使用最受欢迎的插件＆＃39; Firebug＆＃39;。安装完成后，按F12并打开控制台面板。使用＆＃39;检查＆＃39;要观察元素的元素，您可以在运行时看到更改。

P.S：Firebug使用html，CSS和Javascript为开发提供了几种不同的工具。

玩FireFox和Firebug

Answer 2

在firefox中，当你在追加它们之前隐藏新单元格时，它会导致在显示时获得css样式display: block。这会导致它们渲染不正确。

要解决此问题，请附加单元格然后隐藏和淡入：

$.each(obj.result, function() {  
    var html = "<td>Hello </td><td>World</td>"; 
    $(html).appendTo("table tr#cell"+count).hide().fadeIn(1000);
    count += 1;  
});

工作示例 - http://jsfiddle.net/NzJpA/2/

jQuery表附加问题

2 个答案: