Question

如何通过JavaScript更改html表中所有td的backgroundcolour？

这是一次尝试，但不起作用：

document.getElementById('AdressenTabelle').td.style.backgroundColor = "#white";

以下是表格的HTML：

<table border="1" id="AdressenTabelle" class="datatable">
<thead>
    <tr>
        <th>Firma</th>
        <th>Name</th>
        <th>Straße</th>
        <th>Ort</th>
        <th>Rollen</th>
        <th>ID</th>
    </tr>
</thead>
<tbody class="datatablecontent" onclick="doIt(event)">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

Answer 1

试试这个：

var table = document.getElementById("AdressenTabelle"); // Get the table
for (var i = 0, row; row = table.rows[i]; i++) {        // Iterate through all it's rows
    for (var j = 0, cell; cell = row.cells[j]; j++) {   // Iterate through the row's cells
        cell.style.backgroundColor = 'white';           // Set the colour. (No need for `#` on colour names)
    }  
}

Answer 2

现代浏览器的另一种选择

CSS

.myData {
    background-color: blue;
}

HTML

<table id="AdressenTabelle">
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
        </tr>
    </thead>
    <tbody>
        <td class="myData">Data one</td>
        <td class="myData">Data two</td>
    </tbody>
</table>

的Javascript

document.styleSheets[1].rules[0].style.backgroundColor = 'white';

在jsFiddle

上

Answer 3

有时画画而不是逐行画画更快更有效。

document.getElementById("AdressenTabelle").style.backgroundColor = 'white'

可以做到这一点

如何使用javascript更改表中所有td元素的背景颜色

3 个答案: