Question

我最近一直在学习DOM，并且几天都遇到了问题。出于某种原因，我无法更改html表的内容。我一直在研究w3学校的HTML并使用DOM来更改表元素。

以下是表格的代码：

<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>
        <tr class="row-even">
            <td>Illinois</td>
            <td>Online system</td>
            <td>201602</td>
            <td>0100</td>
            <td>5</td>
            <td>Final</td>
        </tr>
        </tbody>
    </table>
</div>

我一直在尝试做的是更改状态名称及其值。为此，我一直在尝试访问<td>元素。

要更改内容，我尝试了以下操作：比如想要改变＆＃34; Illinois＆＃34;到格鲁吉亚＆＃34;我尝试了以下

document.getElementById("table.summaryTable.courseSummary.sm‌allFontTable").rows[‌2].cells;
 x[1].innerHTML = "Georgia";

我不确定我做错了什么但是控制台一直在给出错误，说明值为空。

有人可以提供指导吗？

Answer 1

使用document#querySelector。在这种情况下，简单的选择器可以是.row-even > td:first-child，因为您只有一个.row-even。

你怎么能更具体？

如果您使用.row-even获得多个tbody > tr:nth-child(1) > td:first-child。

如果您有多个包含.row-even的表，则可以添加容器#courseSummaryContainer .row-even > td:first-child的ID或表.courseSummary .row-even > td:first-child的类。

＆＃13;

var td = document.querySelector('.row-even > td:first-child');

td.innerText = 'Georgia';

＆＃13;

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

＆＃13;

Answer 2

如果你打算使用这个函数，你没有在DOM中获得正确的元素：＆＃34; getElementById＆＃34;，你需要传递你想要的元素的id，如：

HTML：

<div id="courseSummaryContainer" class="tab">
        <table id="myTable" cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
            //... Table content
        </table>
</div>

JS：

document.getElementById("myTable").rows[‌2].cells;

使用DOM更改表的元素

2 个答案: