Question

使用DOM编辑表格时，如何编辑a的内容指定的单元格？
我尝试在w3School上查找不同的方法，但是控制台一直给我这条消息，说明值为空。有人可以帮忙吗？

这是我要编辑的表格的HTML：

<div id="courseSummaryContainer" class="tab">
    <table cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
        <thead><tr>
            <th>Name</th>
            <th>Description</th>
            <th>Date of entry</th>
            <th>Rating</th>
            <th>Grade</th>
            <th>Submission entry type</th>
        </tr></thead>
        <tbody>
        <tr class="row-even">
            <td>Illinois</td>
            <td>Online system</td>
            <td>201602</td>
            <td>0100</td>
            <td>5</td>
            <td>Final</td>
        </tr>
        <tr class="row-odd">
            <td>Alabama</td>
            <td>Regional area health</td>
            <td>201606</td>
            <td>0100</td>
            <td>7</td>
            <td>Final</td>
        </tr>
        </tbody>
    </table>
</div>

我试过了：

document.getElementById("table.summaryTable.courseSummary.sm‌allFontTable").rows[‌0].cells; x[0].innerHTML = "NEW CONTENT";

但它不起作用。

Answer 1

table.summaryTable.courseSummary.sm‌allFontTable不是您桌子的ID，因此getElementById无效。

该表没有ID，但它有3个CSS类。这是a tutorial on the difference 另见the CSS Selectors reference at MDN。

因此您无法使用getElementById，但可以使用document.querySelector^Doc。

下面代码段中的代码会选择courseSummary div包含的第一个包含courseSummaryContainer类的表。

最后，请避免使用innerHTML。 Bad things come to those who do

var csTable = document.querySelector ("#courseSummaryContainer table.courseSummary");
if (csTable) {
    csTable.rows[0].cells[0].textContent = "NEW CONTENT";
}

td, th {
    border: 1px solid gray;
    padding: 0.2ex 1ex;
}
table { border-collapse: collapse;}

<div id="courseSummaryContainer" class="tab">
    <table class="summaryTable courseSummary smallFontTable">
        <thead><tr>
            <th>Name</th>
            <th>Description</th>
            <th>Date of entry</th>
            <th>Rating</th>
            <th>Grade</th>
        </tr></thead>
        <tbody>
        <tr class="row-even">
            <td>Illinois</td>
            <td>Online system</td>
            <td>201602</td>
            <td>0100</td>
            <td>5</td>
        </tr>
        <tr class="row-odd">
            <td>Alabama</td>
            <td>Regional area health</td>
            <td>201606</td>
            <td>0100</td>
            <td>7</td>
        </tr>
        </tbody>
    </table>
</div>

Answer 2

使用表格的ID并尝试

＆＃13;

    <table cellspacing="0" id="courseSummaryContainer" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Date of entry</th>
                <th>Rating</th>
                <th>Grade</th>
                <th>Submission entry type</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row-even">
                <td>Illinois</td>
                <td>Online system</td>
                <td>201602</td>
                <td>0100</td>
                <td>5</td>
                <td>Final</td>
            </tr>
            <tr class="row-odd">
                <td>Alabama</td>
                <td>Regional area health</td>
                <td>201606</td>
                <td>0100</td>
                <td>7</td>
                <td>Final</td>
                </tr>
           </tbody>
    </table>


<script>

var x = document.getElementById("courseSummaryContainer").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";

</script>

＆＃13;

如何使用DOM更改表中的值？

2 个答案: