如何通过onClick()事件改变<tr></tr>中的文本颜色和背景色？

Question

<p>背景颜色<select size="1" onclick="font.style.backgroundColor=this.value">
              <option selected>默　认</option>
              <option value="" style="background-color:#000000;color:#FFFFFF">黑　色</option>
              <option value="#FFFFFF" style="background-color:#FFFFFF;color:#000000">白　色</option>
              <option value="#EEEEEE" style="background-color:#EEEEEE;color:#000000">浅灰色</option>
              <option value="#C0C0C0" style="background-color:#C0C0C0;color:#000000">银灰色</option>
              <option value="#808080" style="background-color:#808080;color:#FFFFFF">灰　色</option>
              <option value="#666666" style="background-color:#666666;color:#FFFFFF">深灰色</option>
              <option value="#FF8080" style="background-color:#FF8080;color:#FFFFFF">浅红色</option>
              <option value="#FF0000" style="background-color:#FF0000;color:#FFFFFF">红　色</option>
              <option value="#CC0000" style="background-color:#CC0000;color:#FFFFFF">深红色</option>
              <option value="#00FF00" style="background-color:#00FF00;color:#000000">浅绿色</option>
              <option value="#008000" style="background-color:#008000;color:#FFFFFF">绿　色</option>
              <option value="#006600" style="background-color:#006600;color:#FFFFFF">深绿色</option>
              <option value="#0000FF" style="background-color:#0000FF;color:#FFFFFF">蓝　色</option>
              <option value="#000080" style="background-color:#000080;color:#FFFFFF">深蓝色</option>
              <option value="#800000" style="background-color:#800000;color:#FFFFFF">褐　色</option>
              <option value="#808000" style="background-color:#808000;color:#FFFFFF">橄榄色</option>
              <option value="#800080" style="background-color:#800080;color:#FFFFFF">紫　色</option>
              <option value="#FF00FF" style="background-color:#FF00FF;color:#FFFFFF">粉红色</option>
              <option value="#008080" style="background-color:#008080;color:#FFFFFF">蓝绿色</option>
              <option value="#990000" style="background-color:#990000;color:#FFFFFF">咖啡色</option>
              <option value="#FFFF00" style="background-color:#FFFF00;color:#000000">黄　色</option>
              <option value="#00FFFF" style="background-color:#00FFFF;color:#000000">浅蓝色</option>
              <option value="#FF9900" style="background-color:#FF9900;color:#000000">橙黄色</option>
              <option value="#CCFF33" style="background-color:#CCFF33;color:#000000">黄绿色</option>
              <option value="#FFCC00" style="background-color:#FFCC00;color:#000000">深黄色</option>
            </select></p><p>文字颜色<select size="1" onclick="font.style.color=this.value">
              <option selected>默　认</option>
              <option value="" style="background-color:#000000;color:#FFFFFF">黑　色</option>
              <option value="#FFFFFF" style="background-color:#FFFFFF;color:#000000">白　色</option>
              <option value="#EEEEEE" style="background-color:#EEEEEE;color:#000000">浅灰色</option>
              <option value="#C0C0C0" style="background-color:#C0C0C0;color:#000000">银灰色</option>
              <option value="#808080" style="background-color:#808080;color:#FFFFFF">灰　色</option>
              <option value="#666666" style="background-color:#666666;color:#FFFFFF">深灰色</option>
              <option value="#FF8080" style="background-color:#FF8080;color:#FFFFFF">浅红色</option>
              <option value="#FF0000" style="background-color:#FF0000;color:#FFFFFF">红　色</option>
              <option value="#CC0000" style="background-color:#CC0000;color:#FFFFFF">深红色</option>
              <option value="#00FF00" style="background-color:#00FF00;color:#000000">浅绿色</option>
              <option value="#008000" style="background-color:#008000;color:#FFFFFF">绿　色</option>
              <option value="#006600" style="background-color:#006600;color:#FFFFFF">深绿色</option>
              <option value="#0000FF" style="background-color:#0000FF;color:#FFFFFF">蓝　色</option>
              <option value="#000080" style="background-color:#000080;color:#FFFFFF">深蓝色</option>
              <option value="#800000" style="background-color:#800000;color:#FFFFFF">褐　色</option>
              <option value="#808000" style="background-color:#808000;color:#FFFFFF">橄榄色</option>
              <option value="#800080" style="background-color:#800080;color:#FFFFFF">紫　色</option>
              <option value="#FF00FF" style="background-color:#FF00FF;color:#FFFFFF">粉红色</option>
              <option value="#008080" style="background-color:#008080;color:#FFFFFF">蓝绿色</option>
              <option value="#990000" style="background-color:#990000;color:#FFFFFF">咖啡色</option>
              <option value="#FFFF00" style="background-color:#FFFF00;color:#000000">黄　色</option>
              <option value="#00FFFF" style="background-color:#00FFFF;color:#000000">浅蓝色</option>
              <option value="#FF9900" style="background-color:#FF9900;color:#000000">橙黄色</option>
              <option value="#CCFF33" style="background-color:#CCFF33;color:#000000">黄绿色</option>
              <option value="#FFCC00" style="background-color:#FFCC00;color:#000000">深黄色</option>
            </select></p><table border="1" width="38%">
  <tr>
    <td width="100%" id=font>文字颜色</td>
  </tr>
</table>

Answer 1

谢谢。
但我想在一个onClick事件中实现
我编了一个函数，但出错说“style不是对象”，不知道为什么？

Answer 2

<STYLE type=text/css>
.tableData {
BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataHit {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: green; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
</style>
<script>
function lightOn(obj){
   obj.className="tableDataHit";
}
</script>
<table width="75%" border="1">
  <tr class=tableData  onclick=lightOn(this) > 
    <td>345</td>
    <td>345</td>
    <td>345</td>
  </tr>
  <tr class=tableData  onclick=lightOn(this) > 
    <td>345</td>
    <td>45</td>
    <td>345</td>
  </tr>
</table>

Answer 3

不过通常都是这样用吧：<STYLE type=text/css>
.tableData {
BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataHit {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: green; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
</style>
<script>
function lightOn(obj){
   obj.className="tableDataHit";
}
</script>
<table width="75%" border="1">
  <tr class=tableData  onmouseout="this.className='tableData'" onmouseover="this.className='tableDataHit'"> 
    <td>345</td>
    <td>345</td>
    <td>345</td>
  </tr>
  <tr class=tableData  onmouseout="this.className='tableData'" onmouseover="this.className='tableDataHit'" > 
    <td>345</td>
    <td>45</td>
    <td>345</td>
  </tr>
</table>

Answer 4

谢谢，谢谢！
我按照两位的方法都试了一下，都可以。就是我的一个变量还未搞定！
我设置了一个trID的变量来获取当前的行的ID或是Class：         document.writeln('<tr class="' + trID + '">')
然后：
document.writeln('<a href="javascript:void(0)" onclick="click_handler(\''+ trID + '\')">')
我在click_handler中写   trID.className="trs"
但是没用！不知道为什么！

Answer 5

document.writeln"<a href=\"javascript:click_handler(this)\">"function click_handler(src){
  src.className="trs"
}