Question

我遇到了javascript问题。我想要做的是在点击重置按钮后将表格中每个单元格的颜色设置为所选颜色。

这是我到目前为止所做的：

function resetColour(objName)
{  
    var arr = new Array();
    arr = document.getElementsByName(objName);

    alert("total objects with name \"free\" = \n" + arr.length);

    for(var i = 0; i < arr.length; i++)
    {
        arr(i).style.backgroundColor = "#FAF4E3";
    }
}

我的html结尾如下：

                <tr>
                    <td onclick="tdOnclick(this)"><center>17:00 - 18:00</center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="mon17"></center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="tue17"></center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="wed17"></center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="thu17"></center></td>
                    <td onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="fri17"></center></td>
                </tr>
                <tbody>
            </table>
            <input type="reset" name="reset" value="Reset" onclick="resetColour('free')">
            <input type="submit" name="submit" value="Submit">

我做错了什么使这不起作用？

编辑：这段javascrip可能会让我搞砸了。如何编辑它以便它将改变整个td的颜色？

function tdOnclick(td) {
    for(var i = 0; i < td.childNodes.length; i++) {
        if(td.childNodes[i].nodeType == 1) {
            if(td.childNodes[i].nodeName == "INPUT") {
                if(td.childNodes[i].checked) {
                    td.childNodes[i].checked = false;
                    td.style.backgroundColor = "#FAF4E3";
                } else {
                    td.childNodes[i].checked = true;
                    td.style.backgroundColor = "#E1E1E1";
                    input.style.backgroundColor = "#E1E1E1";
                }
            } else {
                tdOnclick(td.childNodes[i]);
            }
        }
    }
}

Answer 1

so you want the <td>'s to change color based on the name you pass?（不是<input>，而不是<center>）

function resetColour(objName){  

    //get element by name (as requested by post)
    var arr = document.getElementsByName(objName);

    //store length in variable
    //some say accessing .length in a loop condition adds overhead 
    var arrLen = arr.length;

    //loop through all found elements    
    for(var i = 0; i < arrLen; i++){

        //InputElement.CenterTag.TdElement.style.backgroundColor = foo
        arr[i].parentNode.parentNode.style.backgroundColor = "#F00";
    }
}

function tdOnclick(obj){
    obj.style.backgroundColor = "#F00";
}

您可能希望避免使用<center>，除了它已被弃用之外，它还是代码中额外.parentNode的原因（完全没必要）。使用CSS代替内容。

Answer 2

试

document.getElementsByTagName（ 'TD'）style.backgroundColor = “＃FAF4E3”;

Answer 3

您的代码基本上是尝试设置输入类型本身的背景颜色，而不是围绕复选框的td。复选框样式通常由操作系统确定。

<table>
<tr>
    <td class="a"onclick="tdOnclick(this)"><center>17:00 - 18:00</center></td>
    <td class="a" onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="mon17"></center></td>
    <td class="a" onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="tue17"></center></td>
    <td class="a" onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="wed17"></center></td>
    <td class="a" onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="thu17"></center></td>
    <td class="a" onclick="tdOnclick(this)"><center><input type="checkbox" name="free" value="fri17"></center></td>
</tr>
</table>
<input type="reset" name="reset" value="Reset" onclick="resetColour()">
<input type="submit" name="submit" value="Submit">

<script>
function resetColour(objName)
{
    $('.a').each(function(){
        $(this).css('backgroundColor', '#000000');

    });
}
</script>

使用jQuery很简单：

$('.a').each(function(){
    $(this).css('backgroundColor', '#000000');
});

单击我的重置按钮时更改所有表格单元格颜色

3 个答案: