如何使用javascript在表格中插入标签

Question

我正在尝试找到一种将 html 元素标签插入到表结构中的方法。 html 页面中通常有多个表，因此我为每个工作正常的表动态创建并插入一个 ID。但是，当我尝试将特定的 html 元素插入表格的不同部分时，我只会得到错误，或者表格永远不会更新。

我是一名技术作家，正在尝试使用 javascript，而我使用的创作工具不允许使用 thead 和 tbody 标签，因此当我在文档中的 html 页面中遇到不具有此结构的表格时，我需要添加它。之后，我在表格中动态实现了可视化元素，以便于查找信息。

这一切在已经具有thead结构的表上都可以正常工作，因此我需要一种方法将这种结构放入没有它的表中。

这是我正在尝试做的事情的前后视图：

之前：

    <table class="TableHeadingOnTop" style="border-collapse: separate" 
                                             cellspacing="0" border="1">
        <tr class="t1Row">
            <td class="t1Col"><p class="MoreList"><a 
             href="DefaultProbeComponents.htm">DefaultProbeComponents</a></p></td>
            <td class="t2Col"><p class="MoreList"><a href="ProbeQualVisionOpticsCalFocusLatencyDuration1.htm">ProbeQualVisionOpticsCalFocusLatencyDuration1</a></p></td>
            <td class="last"><p class="MoreList"><a 
            href="VFTScan_LSPX1C_Speed1.htm">VFTScan_LSPX1C_Speed1</a></p></td>
        </tr>
        <tr class="t2Row">
            td class="t1Col"><p class="MoreList"><a href="DefMode.htm">DefMode</a></p></td>
            <td class="t2Col"><p class="MoreList"><a href="ProbeQualVisionOpticsCalFocusLatencyDuration2.htm">ProbeQualVisionOpticsCalFocusLatencyDuration2</a></p></td>
            <td class="last"><p class="MoreList"><a 
            href="VFTScan_LSPX1C_Speed2.htm">VFTScan_LSPX1C_Speed2</a></p></td>
        </tr>
        <tr class="t1Row">
            <td class="t1Col"><p class="MoreList"><a 
            href="DefMoveSpeed.htm">DefMoveSpeed</a></p></td>
            <td class="t2Col"><p class="MoreList"><a            href="ProbeQualVisionOpticsCalFocusLatencyEnabled.htm">ProbeQualVisionOpticsCalFocusLatencyEnabled</a></p></td>
            <td class="last"><p class="MoreList"><a 
            href="VFTScan_LSPX1H_Acceleration1.htm">VFTScan_LSPX1H_Acceleration1</a></p></td>
        </tr>
    </table>

之后——在这里，可以看到thead & /thead 和 tbody & /tbody 结构：

<table class="TableHeadingOnTop" style="border-collapse: separate" 
                                             cellspacing="0" border="1">
    <thead>
        <tr>
            <th><p>&#160;</p></th>
            <th><p>&#160;</p></th>
            <th><p>&#160;</p></th>
        </tr>
    </thead>
    <tbody>
        <tr class="t1Row">
            <td class="t1Col"><p class="MoreList"><a 
             href="DefaultProbeComponents.htm">DefaultProbeComponents</a></p></td>
            <td class="t2Col"><p class="MoreList"><a 
             href="ProbeQualVisionOpticsCalFocusLatencyDuration1.htm">ProbeQualVisionOpticsCalFocusLatencyDuration1</a></p></td>
            <td class="last"><p class="MoreList"><a 
             href="VFTScan_LSPX1C_Speed1.htm">VFTScan_LSPX1C_Speed1</a></p></td>
        </tr>
        <tr class="t2Row">
            <td class="t1Col"><p class="MoreList"><a 
             href="DefMode.htm">DefMode</a></p></td>
            <td class="t2Col"><p class="MoreList"><a 
             href="ProbeQualVisionOpticsCalFocusLatencyDuration2.htm">ProbeQualVisionOpticsCalFocusLatencyDuration2</a></p></td>
            <td class="last"><p class="MoreList"><a 
             href="VFTScan_LSPX1C_Speed2.htm">VFTScan_LSPX1C_Speed2</a></p></td>
        </tr>
        <tr class="t1Row">
            <td class="t1Col"><p class="MoreList"><a 
             href="DefMoveSpeed.htm">DefMoveSpeed</a></p></td>
            <td class="t2Col"><p class="MoreList"><a 
             href="ProbeQualVisionOpticsCalFocusLatencyEnabled.htm">ProbeQualVisionOpticsCalFocusLatencyEnabled</a></p></td>
            <td class="last"><p class="MoreList"><a 
             href="VFTScan_LSPX1H_Acceleration1.htm">VFTScan_LSPX1H_Acceleration1</a></p></td>
        </tr>
    </tbody>
</table>

如果有办法，请告诉我 - 谢谢！

以下是我面临的挑战的说明：

// In this function, I want to insert the thead structure
// and the opening and closing tbody tags...
// this function receives the value of the number of
// columns in the table and the table's ID name...
function createtheadstruct(colcount, id_name_new){
    var table = document.getElementById(id_name_new);
    var header = table.createTHead();
    var row = header.insertRow(0);
    var theadcntr = colcount-1;
    var cell
    
    // Here I'm inserting the thead data rows (td)
    // based on the column counter (theadcntr)
    for (var i=0; i<=theadcntr; i++) {
        cell = row.insertCell(i);
        cell.innerHTML = "$#160;";
    }
    
    //After the thead structure is created, I want to insert the opening tbody tag.
    //Since the rows and cells of table's body are already there, I want to insert
    //the opening tbody tag right after the closing thead tag (/thead) and then the
    //closing tbody tag (/tbody) before the closing table tag (/table)
}```

Answer 1

在 JSFiddle 上试试这个，它似乎对我来说很好用！

// First create a table to be used as an example.
const table = document.getElementById('test-table-1')
const head = document.createElement('thead')

// Create 3 th tags for an example.

const th1 = document.createElement('th')
th1.appendChild(document.createTextNode('Test Header 1'))

const th2 = document.createElement('th')
th2.appendChild(document.createTextNode('Test Header 2'))

const th3 = document.createElement('th')
th3.appendChild(document.createTextNode('Test Header 3'))

// Add the th tags to the thead
head.appendChild(th1)
head.appendChild(th2)
head.appendChild(th3)

// Give the table the thead.
table.appendChild(head)

// Now we have a table to work with.

// Create a tbody.
const tbody = document.createElement('tbody')

// Add a couple of rows.
const tr1 = tbody.insertRow()
const tr2 = tbody.insertRow()

// Add td tags to to rows.
for (let tr of [tr1, tr2]) {
    for (let i=0; i<3; i++) {
    const td = tr.insertCell(i)
    td.innerText = 'foo'+i
  }
}

// Add the tbody to the table.
table.appendChild(tbody)

<table id="test-table-1"></table>

Answer 2

一般来说，您可以在 Table DOM 元素上调用 insertRow() 方法，然后调用 insertCell() 方法，如下所示，以使用 JavaScript 将标签动态添加到您的表中。

查看用 /* - */ 截断的 Javascript 末尾的代码，以了解涉及 thead 和 tbody 的替代方法。这使您可以根据需要调用和删除广告。

/* Find a <table> element with id="myTable": */
/* var table = document.getElementById("myTable"); */

/* Create an empty <thead> element and add it to the table: */
/* var header = table.createTHead(); */

const table = document.querySelector('table');

/* Insert new row */
const row = table.insertRow();

/* Insert cells (td) for row */
const td0 = row.insertCell(0);
const td1 = row.insertCell(1);
const td2 = row.insertCell(2);
const td3 = row.insertCell(3);

/* Populate cells with data */
td0.innerText = 'Foo';
td1.innerText = '3';
td2.innerText = '6';
td3.innerText = 'success';

/* function myCreateFunction() {
var table = document.getElementById("myTable");
var header = table.createTHead();
var row = header.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = "<b>This is a table header</b>";
}

function myDeleteFunction() {
document.getElementById("myTable").deleteTHead();
} */

<table border="1">
  <thead>
    <tr>
      <td>Element Name</td>
      <td>x</td>
      <td>y</td>
      <td>testCol</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>