Question

我正在尝试使用insertcell方法将一列添加到我的表中，但是语法错误或无法正常工作。我想知道是否有人可以解释我要去哪里错了？

html中的表主体使用其他一些JavaScript动态填充，但是我认为这不是问题，因为我已经测试了使用警报框从该表中获取某些内容并且可以正常工作（注释如下）：

<!DOCTYPE html>
<script type="text/javascript" src="fullstationxyparser.js">
</script>
<html>
<body>
    <table border=1>
        <thead>
            <tr>
                <td>Element Name</td>
                <td>x</td>
                <td>y</td>
                <td>testCol</td>
            </tr>
        </thead>
        <tbody id="stationlist">
        </tbody>
    </table>
</body>
</html>

function addStationNames() {
    var myTable = document.getElementById("stationlist");
    var stationListRows = myTable.getElementsByTagName('tr');

    for (var i = 1; i < stationListRows.length; i++) {
        var cell = stationListRows[i].getElementsByTagName('td');
        var stationName = cell[0].innerHTML; //get station id from element Name column
        var currentRow = stationListRows[i];
        var newCol = currentRow.insertcell(-1);
        newCol.innerHTML = stationName;
        //alert(stationName);
    }
}

在Firefox开发人员工具中，我得到TypeError: "currentRow.insertcell is not a function"。也许我不能在行集合上使用insertcell方法？

Answer 1

通常，您可以在Table DOM元素上调用insertRow()方法，然后调用insertCell()方法，如下所示，以使用JavaScript将<td>标签动态添加到表中。

请谨慎呼叫insertCell()（用大写字母C），而不要像目前那样呼叫insertcell()：

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';

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

特定于您的代码，要考虑的其他一些更改可能如以下代码片段中所列：

function addStationNames() {

  /* Condense table row access into single query */
  const stationRows = document.querySelectorAll("#stationlist tr");
  
  stationRows.forEach((stationRow, i) => {
    
    /* Skip first row */
    if(i === 0) { return; }
    
    /* Get station name from text of first cell */
    const stationName = stationRow.querySelector('td:first-child').innerText;
    
    /* Insert last cell on row and assign station name */
    stationRow.insertCell(-1).innerText = stationName;
  });
  
  /*
  Old code:
  for (let i = 1; i < stationListRows.length; i++) {    
    var cell = stationListRows[i].getElementsByTagName('td');
    var stationName = cell[0].innerHTML; 
    var currentRow = stationListRows[i];
    var newCol = currentRow.insertcell(-1);
    newCol.innerHTML = stationName;
  }
  */
}

addStationNames();

<!-- set table id to stationlist -->
<table border="1" id="stationlist">
  <thead>
    <tr>
      <td>Element Name</td>
      <td>x</td>
      <td>y</td>
      <td>testCol</td>
    </tr>
    <tr>
      <td>90's pop</td>
      <td>232</td>
      <td>543</td> 
    </tr>
  </thead>
  <tbody>
    <!-- Remove id from tbody -->
  </tbody>
</table>

Answer 2

上述方法的替代方法（完全可以）是此方法，它也是创建 any html元素的更通用方法：

const table = document.getElementById('one');
const newRow = document.createElement("tr");
let newCell = document.createElement("td");
newCell.textContent = "first cell";
let newCell2 = document.createElement("td");
newCell2.textContent = "second cell";
newRow.appendChild(newCell);
newRow.appendChild(newCell2);
table.appendChild(newRow);

https://jsfiddle.net/zgaosdbv/

如何使用JavaScript将<td>标签添加到html表中？

2 个答案: