Question

我有一个动态创建表的函数

 function createDynamicTable(tbody, rows, cols)
 {
     if (tbody == null || tbody.length < 1) return;
     for (var r = 1; r <= rows; r++) 
     {
          var trow = $("<tr>");
          for (var c = 1; c <= cols; c++)
          {
              var cellText="hello World ";
              //var cellText=$.newWindow();
              $("<td>").addClass("tableCell")
                       .text(cellText)
                       .data("col", c)
                       .appendTo(trow);
           }
           trow.appendTo(tbody);
      }
 }

我在打电话

$("#tbl").height("65%");
$("#tbl2").height("30%")
createDynamicTable($("#tbl"),2, 3);
createDynamicTable($("#tbl2"),1, 1);

html就是

<table id="tbl" border="1" align="center" height="95%" width="100%" >
    <table id="tbl2" border="1" align="center" height="95%" width="100%" >

两个表正在创建，但它们并排而来。但是我在另一个下面就像table1在顶部而table2在下面。任何新的线逻辑。

Answer 1

<table id="tbl" border="1" align="center" height="95%" width="100%" ><br/>
<table id="tbl2" border="1" align="center" height="95%" width="100%" >

和功能

 function createDynamicTable(tbody, rows, cols)
 {
     if (tbody == null || tbody.length < 1) return;
     for (var r = 1; r <= rows; r++) 
     {
          var trow = $("<tr/>");
          for (var c = 1; c <= cols; c++)
          {
              var cellText="hello World ";
              //var cellText=$.newWindow();
              $("<td/>").addClass("tableCell")
                       .text(cellText)
                       .data("col", c)
                       .appendTo(trow);
           }
           trow.appendTo(tbody);
      }
 }

这里是小提琴http://jsfiddle.net/sLrRw/

Answer 2

如果您确保将这些样式规则中的一个应用于<table>元素，那么这些表应自动在彼此之上：

display: block;

或者...

display: table;

将两张桌子放在另一张桌子下

2 个答案: