Question

我想创建一个带有一些可以改变背景颜色的td单元格的html表格，从红色到绿色（＆＃34; C＆＃34;到＃34; A＆＃34;）和从绿色到红色（＆＃34; A＆＃34;到＆＃34; C＆＃34;），使用＆＃34;选择onchange＆＃34;。它第一次工作，但不是第二次。

这是JS

<script type="text/javascript">
function change(id){
var x=document.getElementById(id);
x.style.backgroundColor="#e50017";//red
}
function exchange (id){
var x=document.getElementById(id);
x.style.backgroundColor="#009900";//green
}
</script>

这是HTML

<form id="menuForm" name="menuForm" >
<table summary="layout table">
<tbody>
<tr>
           <td rowspan="1" colspan="1" id="prova" width="35px" align="center" bgcolor="#e50017">
            M
            <br>
            <select onchange="exchange('prova')" name="select1">
            <option value="0" selected="selected">C</option>
            <option value="1">A</option>
            </select>
            </td>
            <td rowspan="1" colspan="1" id="prova1" width="35px" align="center" bgcolor="#009900">
            M
            <br>
            <select onchange="change('prova1')" name="select2">
            <option value="1" selected="selected">A</option>
            <option value="0">C</option>
            </select>
            </td>
        </tr>
      </tbody>
    </table>     
</form>

Answer 1

我建议改为转换类名。它将使其变得简单灵活 - 例如，它不仅可以轻松更改背景颜色，还可以轻松更改任何其他样式，甚至无需触摸javascript函数：

＆＃13;

function change(id) {
    var x = document.getElementById(id);
    x.className = x.className === 'red' ? 'green' : 'red';
}

＆＃13;

.red {
    background: #e50017;
}
.green {
    background: #009900;
}

＆＃13;

<form id="menuForm" name="menuForm">
    <table summary="layout table">
        <tbody>
            <tr>
                <td rowspan="1" colspan="1" id="prova" width="35px" class="red" align="center">M
                    <br>
                    <select onchange="change('prova')" name="select1">
                        <option value="0" selected="selected">C</option>
                        <option value="1">A</option>
                    </select>
                </td>
                <td rowspan="1" colspan="1" id="prova1" width="35px" class="green" align="center">M
                    <br>
                    <select onchange="change('prova1')" name="select2">
                        <option value="1" selected="selected">A</option>
                        <option value="0">C</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</form>

＆＃13;

Javascript选择OnChange第二次不起作用

1 个答案: