How to change values in a table using the DOM?

Question

When using the DOM to edit a table, how do you edit the contents of a specified cell?
I tried looking up different ways on w3Schools however console keeps giving me this message stating the values are null. Can somebody help?

This is the HTML for the table I am trying to edit:

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

I tried:

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

but it didn't work.

Answer 1

Use id for table and try

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

Answer 2

table.summaryTable.courseSummary.sm‌​allFontTable is not an ID for your table, so getElementById will not work.

That table has no ID, but it does have 3 CSS classes. Here's a tutorial on the difference.
See, also, the CSS Selectors reference at MDN.

So you can't use getElementById, but you can use document.querySelector^Doc.

Code as in the snippet below selects the first table, with the class courseSummary, that's contained by the courseSummaryContainer div.

Finally, avoid using 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>