Question

我想将我行的第一个元素设为 <th> 我正在这样做，但我将 <td> 作为我的第一个元素。我做错了什么？

基本上我想要这样的东西<tr><th><b>Table Header</b></th><td>item1</td><td>item2</td><\tr>

var table = document.getElementById("data");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    $("#table td:first").append('<th><b>Table Header</b></th>');

Answer 1

你只需要在你的问题中不要使用 insertCell

var table = document.getElementById("data");
var row = table.insertRow(-1);
$(row).append('<th>Table Header</th>');

<table id="data"></table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Answer 2

您可以创建自己的方法来插入 <th>

// insert <TH> method, at  your oxn risk
HTMLTableRowElement.prototype.insert_th_Cell = function(index) 
  {
  let cell = this.insertCell(index)
    , c_th = document.createElement('th')
  cell.replaceWith(c_th)
  return c_th 
  }
//---------------------------------------

let thead   = myTable.createTHead()
  , tBody   = myTable.createTBody()
  , rowHead = thead.insertRow()
  ;
rowHead.insertCell()
rowHead.insert_th_Cell().textContent = 'c1'
rowHead.insert_th_Cell().textContent = 'c2'
rowHead.insert_th_Cell().textContent = 'c3'

 
let nRow = tBody.insertRow()
nRow.insert_th_Cell().textContent = 'line'
nRow.insertCell().textContent = 'AA'
nRow.insertCell().textContent = 'BB'
nRow.insertCell().textContent = 'CC'

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td,th  {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }
thead { 
  background-color: aquamarine;
}
tbody th{ 
  background-color: orchid;
}

<table id="myTable"></table>

如何获得`<th>`而不是`<td>`？

2 个答案: