使用事件表单onchange时更改表单元格文本颜色

时间:2013-03-01 18:21:44

标签: javascript html css getelementbyid

当使用onchange事件更改表单中的内容时,我正在寻找正确的方法(适用于所有浏览器)以更改单元格表文本颜色(这是一个链接)。我正在使用这个:

JavaScript代码

function changeColor(num){
    if (num == "1"){
               cont = num - 1;
               answer[cont] = 1;
               document.getElementById("cell_1").className="cellNumFilled";
        } 

HTML代码

<table border="1" cellspacing="0" cellpadding="2">
  <tr>  
   <td><a class="cellNum" HREF="#preg1" title="1" id="cell_1">1</a></td> 
   <td><a class="cellNum" HREF="#preg2" title="2" id="cell_2">2</a></td> 
   <td><a class="cellNum" HREF="#preg3" title="3" id="cell_3">3</a></td> 
  </tr>
</table>

<div id="quesItem">
<p><b>1. [ 1 Pts.]</b> bla bla bla</p>
<p>Answer: 
  <input type="text" name="a6" maxlenght="200" size="20" onchange="changeColor(1)" />
  <input type="button" value="Preview"/> 
</p>
</div>

完整的“功能代码”位于此jsfiddle

当输入框中的内容发生变化时,表格顶部的颜色也必须更改。我正在使用两个类用于标记,一个默认使用另一个类,当内容通过'document.getElementById(“idName”)更改时.className =“newClassName”;'但不起作用。知道为什么吗?还是一种更好,更简单的方法呢?

2 个答案:

答案 0 :(得分:0)

尝试以下方法:

document.getElementById("idName").setAttribute('class', 'className');

我希望它有所帮助。

答案 1 :(得分:0)

在设置课程之前,只需删除该属性

document.getElementById("cell_1").removeAttribute("class")

然后

document.getElementById("cell_1").setAttribute("class","cellNumFilled")