我该如何添加 <td> 用JavaScript标记我的html表格？

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

上面的答案（完全没问题）的替代方法是这种方法，它也是创建任何 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/

我该如何添加 <td> 用JavaScript标记我的html表格？

问题描述

2 个解决方案

解决方案1
3 2019-06-10 21:50:19

解决方案2
0 2019-06-10 21:56:34

我该如何添加 <td> 用JavaScript标记我的html表格？

问题描述

2 个解决方案

解决方案1 3 2019-06-10 21:50:19

解决方案2 0 2019-06-10 21:56:34

解决方案1
3 2019-06-10 21:50:19

解决方案2
0 2019-06-10 21:56:34