如何获取 `<th>` 而不是 `<td>`？答案

【问题标题】：How to get `<th>` instead of `<td>`?如何获取 `<th>` 而不是 `<td>`？
【发布时间】：2021-05-16 11:55:46
【问题描述】：

我想将我的行的第一个元素作为<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>');

【问题讨论】：

insertCell 将始终/*仅* 创建 td - 答案：不要使用 insertCell
也许不是完全相同的副本，但这应该会有所帮助：stackoverflow.com/q/14146139/2422776
also: $("td").append("th") 不会给你有效的html，也许你想要.insertBefore？
只需使用 jquery 添加所有 html：$("table#data").prepend("<tr><th>Table Header</th></tr>")
那我用什么代替 insertcell 呢？

标签： javascript html jquery css tags

【解决方案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>

【讨论】：

【解决方案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;
}

&lt;table id="myTable"&gt;&lt;/table&gt;

【讨论】：