Question

我试图在Javascript中从嵌套的for循环数组创建一个html表。当我尝试将<tr>标签附加到表格时，它们会被放入一个名为tbody的元素中。如何将tr标记附加到table元素而不是tbody元素？

<html>
   <head>
        <script src='jq.js'></script>
   </head>
   <body>
       <table id='tb'></table>

   </body>
   <script>
       $('#tb').ready(     
        function() {
           console.log('table loaded');

          var ar = Array(2);

           for(var i=0;i<ar.length;i++){
              ar[i]=Array(2);
           }

           ar[0][0]='1';
           ar[1][0]='2';
           ar[0][1]='3';
           ar[1][1]='4';

           console.log('multidimensional array created!');

          for(var j=0;j<ar.length;j++){
              console.log('<tr>');
              $('#tb').append('<tr>');
              for(var k=0;k<2;k++){
                console.log('<td>'+ar[k][j]+'</td>');
                $('#tb').append('<td>'+ar[k][j]+'</td>');
              }
              console.log('</tr>');
              $('#tb').append('</tr>');
          }
          //expected:
          //12
          //34
          //actual
          //1 2 3 4
        });   
   </script>
</html>

这里是jsfiddle

Answer 1

你做不到。 HTML表格由三部分组成：

thead包含标题行
tbody包含数据行。如果您想要制作不同的行组，则可以有多个这样的行（例如，如果行=月，则每年可以有一个单独的tbody。
tfoot包含页脚行

如果您将行直接放在table标记内，则会假定它们是tbody的一部分，浏览器会自动为您创建此元素。您必须将所有行放在tbody元素中，或将它们全部放在table中。

您的代码问题与tbody元素无关。问题是您尝试将td元素直接附加到表，而不是tr元素。您正在将$('#tb').append()视为将HTML文本连接到文档，而不是插入整个HTML元素。它应该是这样的：

     for(var j=0;j<ar.length;j++){
          console.log('<tr>');
          var row = $('<tr/>').appendTo('#tb');
          for(var k=0;k<2;k++){
            console.log('<td>'+ar[k][j]+'</td>');
            row.append('<td>'+ar[k][j]+'</td>'); // Append TD to TR
          }
      }

或者您可以使用CtrlX的答案，他将整个表格组成一个字符串，然后一步将其插入DOM。这比以递增方式构建表更有效。

Answer 2

您不应该将这样的内容附加到您的表中，因为浏览器必须重绘整个DOM，因此效率不高。

你应该在一个字符串中构建你的表，然后将整个字符串附加到你的表中，如下所示：

$('#tb').ready(     
    function() {
       console.log('table loaded');

      var ar = Array(2);

       for(var i=0;i<ar.length;i++){
          ar[i]=Array(2);
       }

       ar[0][0]='1';
       ar[1][0]='2';
       ar[0][1]='3';
       ar[1][1]='4';

       console.log('multidimensional array created!');
        //Prepare the outputed string
       var theTable = "";
      for(var j=0;j<ar.length;j++){
          theTable += '<tr>';
          for(var k=0;k<2;k++){             
            theTable += '<td>'+ar[k][j]+'</td>';
          }
          theTable += '</tr>';
      }
       //Finally appended the whole string to the table
       $('#tb').append(theTable);
      //expected:
      //12
      //34
      //actual
      //1 2 3 4
    });

我为你做了一个Jsfiddle：JSFiddle

玩得开心！

Answer 3

   <body>
       <table id='tb1'>
           <tbody id='tb'>
           </tbody>

       </table>

   </body>
   <script>
       $('#tb').ready(     
        function() {
           console.log('table loaded');

          var ar = Array(2);

           for(var i=0;i<ar.length;i++){
              ar[i]=Array(2);
           }

           ar[0][0]='1';
           ar[1][0]='2';
           ar[0][1]='3';
           ar[1][1]='4';

           console.log('multidimensional array created!');

          for(var j=0;j<ar.length;j++){

              $('#tb').append('<tr>');
              for(var k=0;k<2;k++){                
                $('#tb').append('<td>'+ar[k][j]+'</td>');
              }             
              $('#tb').append('</tr>');
          }
          //expected:
          //12
          //34
          //actual
          //1 2 3 4
        });   
   </script>
</html>

这是工作代码，在这个小提琴上http://jsfiddle.net/fn4Wz/

从多维javascript数组创建html表

3 个答案: