在Firefox中,jQuery表行未正确显示

时间:2010-09-07 17:45:44

标签: javascript jquery html-table

这是我写的代码:

<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

3 个答案:

答案 0 :(得分:2)

您需要将宽度和高度值包装在引号中。此外,不是每一行附加到正文,而是创建一个附加html的字符串变量。然后,在最后,追加整个字符串。

答案 1 :(得分: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);
    }
}

答案 2 :(得分:1)

每次使用$('body').append()时,您都会附加到document.body,因此请将其设为:

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

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

等等。