2010-09-07 50 views
2

這是我寫的代碼段:jQuery的表中的行沒有正確表示在Firefox

<html>                 
<head>                 
<script type="text/javascript" src="jquery-min.js"></script>   
<script type="text/javascript">           

    $(document).ready(function() { 

    var rowIndex = ["A","B","C","D","E","F","G","H","I","J","K","L","N"]; 
    $.get("crosswords.xml",{},function(xml){ 

    $('crossword',xml).each(function(i) { 

    if("1" == $(this).find("number").text()) 
    { 
      $('body').append("<table border=1>"); 

      for(var i = 0;i < rowIndex.length;i++) 
      { 
       $('body').append("<tr height=25>"); 

       for(var j = 0;j < 13;j++) 
       { 
        k = (j+1); 
        var cellname = rowIndex[i] + k; 
        var cell = $(this).find(cellname).text(); 

        if(cell == "b") 
        { 
         $('body').append("<td width=25> </td> "); 
        } 
        else if(cell == "c") 
        { 
         $('body').append("<td width=25 bgcolor=black> </td> "); 
        } 
        else 
        { 
        $('body').append("<td width=25>" + cell + "</td> "); 
        } 


       } 


       $('body').append("</tr> "); 
      } 

      $('body').append("</table>"); 
     } 

    }); 
    alert(A); 

    }); 

})          
</script>                
</head>                 
<body>                



</body>                 
</html> 

在Firefox它被示出作爲一個單一的列的表。 在IE7表中根本沒有顯示。 會是什麼問題。 jQuery版本是1.4

回答

2

你不應該做這樣的事情:$('body').append("</tr> ");

當使用JavaScript來創建DOM節點,你應該創建整個節點,而不是打開和關閉這個。例如建一個表,你會做這樣的事情:

var table = $('<table>',{border: '1'}).appendTo('body'); 
for (var i = 0; i < 5; i++) { 
    var tr = $('<tr>').appendTo(table); 
    for (var j = 0; j < 5; j++) { 
     var td = $('<td>').text(i + ',' + j).appendTo(tr); 
    } 
} 
+0

嘿傑米,不知道你是否收到我的迴應你的評論通知,但你應該採取看看這個:http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly總之...創建一個html字符串比在一個循環內部操作DOM節點要快得多。 – treeface 2010-09-07 22:53:24

+0

如果您關心的是該級別的速度,那麼您最好還是使用document.write。另外,如果你正在構建大量的數據,那麼很有可能客戶端並不是一個明智的決定。 – 2010-09-08 05:46:58

2

您需要用引號將寬度和高度值包裹起來。另外,不要將每一行追加到主體,而是創建一個字符串變量,並將其添加到HTML中。然後,在最後,追加整個字符串。

+0

爲什麼你想要構建完整的html而不是僅僅創建和操作DOM節點就不在我身邊了。 – 2010-09-07 17:52:59

+0

@Jamie因爲以這種方式使用append比操作DOM節點要快得多。多次使用append方法會導致必須遍歷DOM並多次解析字符串。看到這篇文章:http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-正確 – treeface 2010-09-07 21:28:27

1

每次使用$('body').append()你追加到document.body,所以使它像工作時間:

var $table=$('<table border="1">'); 

$(document.body).append($table); 
... 
$table.append('<tr></tr>'); 
.. 

等。

相關問題