在动态创建的表中包含表头的位置？

Question

＆＃13;

＆＃13;

function createTable(){
  $('#mytable').empty();
  mytable = $('<table></table>');
  var rows = $("#rowcount").val();
  var cols = $("#columncount").val();
  var tr = [];

  for (var i = 0; i < rows; i++) {
    var row = $('<tr></tr>').appendTo(mytable);
    for (var j = 0; j < cols; j++) {
      $('<td></td>').text(i).appendTo(row);
    }
  }

  $('#box').empty();
  mytable.appendTo("#box");
}

＆＃13;

table td{
  padding:10px;
  margin:10px;
  border:1px solid #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Time:<p id="demo">
  <div class="form-group">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="box box-info">
            <div class="box-header with-border">Channels View</div>
            <div class="box-body">
              <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10"> 
                   Row Count:<input type="text" id="rowcount" />
                   Column Count:<input type="text" id="columncount" />
                   <input type="button" onclick="createTable();" value="Create Table" />
                   <div id="box">
                </div>
                <div class="col-md-1"></div>
              </div>
            </div>
         </div>
      </div>
    </div>
  </div> 
</div>

＆＃13;

＆＃13;

＆＃13;

这是我的代码。它动态创建表。但是，如果我想将标题添加到表中，我应该在哪里放置标题字段。此外，如果我需要在表格中显示关于键值的db值，我应该怎么做？

Answer 1

表格中有两个部分thead和tbody

您的头部数据应该进入thead，数据应该进入tbody

使用table和thead创建tbody，如下所示

 mytable = $('<table><thead><tr></tr></thead><tbody></tbody></table>');

然后从您创建的表中获取head和body引用

var head = mytable.find('thead tr');
var body = mytable.find('tbody');

现在将<th></th>中的标题附加到head

for (var j = 0; j < cols; j++) {
    $('<th></th>').text('Head-'+j).appendTo(head);
}

并将<td></td>中的数据附加到body。

for (var i = 0; i < rows; i++) {
    var row = $('<tr></tr>').appendTo(body);
    for (var j = 0; j < cols; j++) {
      $('<td></td>').text(i).appendTo(row);

    }

}

查看完整代码段

<强>段

＆＃13;

＆＃13;

function createTable() {
  $('#mytable').empty();
  mytable = $('<table><thead><tr></tr></thead><tbody></tbody></table>');
  
  var head = mytable.find('thead tr');
  var body = mytable.find('tbody');
  
  var rows = $("#rowcount").val();
  var cols = $("#columncount").val();
  var tr = [];

  for (var j = 0; j < cols; j++) {
    $('<th></th>').text('Head-'+j).appendTo(head);
  }
  
  for (var i = 0; i < rows; i++) {
    var row = $('<tr></tr>').appendTo(body);
    for (var j = 0; j < cols; j++) {
      $('<td></td>').text(i).appendTo(row);

    }

  }

  $('#box').empty();
  mytable.appendTo("#box");


}

＆＃13;

table td, th {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
}

table th{
   background-color: #eee;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Time:
<p id="demo">
  <div class="form-group">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="box box-info">
            <div class="box-header with-border">
              Channels View

            </div>
            <div class="box-body">
              <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                  Row Count:<input type="text" id="rowcount" /> Column Count:<input type="text" id="columncount" />
                  <input type="button" onclick="createTable();" value="Create Table" />
                  <div id="box">
                  </div>
                  <div class="col-md-1"></div>

                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/sfeecnch/

＆＃13;

＆＃13;

 createTable = function(){
 		$('#mytable').empty();
    
    var rows = $("#rowcount").val();
    var cols = $("#columncount").val();
    
    // -- adding header
    
    var myTable = $('<table></table>');
    var thead = $('<thead></thead>');
   	var theadRow = $('<tr></tr>').appendTo(thead);
    
    for (var j = 0; j < cols; j++) {
      $('<th></th>').text('Col ' + (j+1)).appendTo(theadRow);
    }
    $(thead).appendTo(myTable);
    $('<tbody></tbody>').appendTo(myTable);
    
    var tr = [];
   
    for (var i = 0; i < rows; i++) {
      var row = $('<tr></tr>').appendTo(myTable);
      for (var j = 0; j < cols; j++) {
      	$('<td></td>').text(i).appendTo(row);
      }
    }

    $('#box').empty();
    myTable.appendTo("#box");
}

＆＃13;

table td{
 padding:10px;
 margin:10px;
 border:1px solid #ccc;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Time:<p id="demo">
<div class="form-group">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
Channels View

</div>
<div class="box-body">
  <div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-10"> 
 Row Count:<input type="text" id="rowcount" />
 Column Count:<input type="text" id="columncount" />
 <input type="button" onclick="createTable();" value="Create Table" />
 <div id="box">
 </div>
<div class="col-md-1"></div>

      </div>
    </div>

 </div>
</div>
</div>
</div> 
</div>

＆＃13;

＆＃13;

＆＃13;