javascript动态加载表格与动态添加表格行

一、动态加载表格

      1.首先在html中为表格的添加位置设置id

               即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下

               <div id="tdl"><div>

      2.在javascript中写添加表格的语句

               若在当前html文件中，则写在<script>标签内部，如

              <script type="text/javascript" >

              document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"    //此处添加的表格可根据自己需要创建

             </script>

         若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句

             document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"  

        然后再引入自己的html文件

             <script type="text/javascript"  src="test.js"></script>

二、  动态添加表格行

      1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下

                  <table>
             <thead></thead>

             <tfoot><tfoot>       //tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。

             <tbody id="rows"></tbody>

             </table>

     2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下

            row=document.createElement("tr");     //创建行

            td1=document.createElement("tr");    //创建单元格

            td1.appendChild(document.createTextNode("content"));   //为单元格添加内容

            row.appendChild(td1);  //将单元格添加到行内

            document.getElementById("rows").append(row);   //将行添加到<tbody>中

三、我的小发现（也许别人早知道了、、、）

      1.  我自己做了一下测试，html中写<table id="tdl'></table>，javascript中写 document.getElementById("tdl").innerHTML="<tr><td></td></tr>"，这样写了之后进行测试，html中table的行不会添加。

       2.做完上面的测试，我又改了一下html中写<table><tr><td id="t'><td><tr></table>，javascript中写document.getElementById("t").innerHTML="<p>content</p>",测试可以添加内容。

     3.思考：从上面两个测试似乎可以得出点什么结论，该如何总结还没想好，哪样的标签可以直接通过innerHTML直接添加呢？