注册 登录
编程论坛 → ASP技术论坛

checkbox一项被选中表格背景变颜色

thbwn 发布于 2008-02-12 19:24， 2058 次点击
以下代码功能是：复选框(checkbox)选中一项，这一项的表格背景变颜色，可我是通过循环
<tr>
    <td><input type="checkbox" id="check4"></td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
  </tr>
获取数据，不能像固定的表格那样check1、check2……应怎样写代码，达到这种效果？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>New Page 1</title>
<script>
function choiceColor(objChk,objTr){
  if(objChk.checked == true) {
    objTr.style.background = 'c0c0c0';
  }else{
   objTr.style.background ='white';
  }  
}
</script>
</head>
<body>
<table width="408" border=1 style="BORDER-COLLAPSE: collapse">
  <tr onClick="choiceColor(check1,this)">
    <td><input type="checkbox" id="check1"></td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
  </tr>
  <tr onClick="choiceColor(check2,this)">
    <td><input type="checkbox" id="check2"></td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
  </tr>
  <tr onClick="choiceColor(check3,this)">
    <td><input type="checkbox" id="check3"></td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
  </tr>
  <tr onClick="choiceColor(check4,this)">
    <td><input type="checkbox" id="check4"></td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
  </tr>
  <tr onClick="choiceColor(check5,this)">
    <td><input type="checkbox" id="check5"></td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
    <td>?</td>
  </tr>
</table>
</body>
</html>


[[it] 本帖最后由 thbwn 于 2008-2-12 20:14 编辑 [/it]]
1 回复
#2
yms1232008-02-13 16:49
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>改变表格背景颜色</title>
<style type="text/css">
<!--
.style1 {
    font-size: 12px;
    font-family: "黑体";
    color: red;
}
.style2 {
    font-size: 12px;
    font-family: "黑体";
    color: yellow;
}
.style3 {
    font-size: 12px;
    font-family: "黑体";
    color: blue;
}
.style31 {
    font-size: 12px;
    font-family: "黑体";
    color: green;
}
.style5 {
    font-size: 12px;
    font-family: "黑体";
    color: white;
}
.style6 {
    font-size: 12px;
    font-family: "黑体";
    color: pink;
}
.style7 {
    font-size: 12px;
    font-family: "黑体";
    color: Azure;
}
.style8 {
    font-size: 12px;
    font-family: "黑体";
    color: cyan;
}
.style9 {
    font-size: 12px;
    font-family: "黑体";
    color: orange;
}
body {
    background-color: #000000;
}
.style4 {color: #EEEEEE}
-->
</style>
<script language="javascript">
//改变颜色按钮点击事件
function changeColor_Click()
{
   var colorStr=getRadioColor();
   if(colorStr=="")
   {
       alert('请先选择单选按钮的一种颜色');
       return false;
   }
   ChangeCurrentColor(colorStr);
   ChangeTableColor(colorStr);
}
//下拉列表选中事件(Val选中的值)
function selColor_Change(Val)
{
  var colorStr=Val;
  ChangeCurrentColor(colorStr);
  ChangeTableColor(colorStr);
}
//获得单选按钮选中的颜色
function getRadioColor()
{
  for(var i=0;i<this.radioColor.length;i++)
  {
      if(this.radioColor[i].checked)
         return this.radioColor[i].value;
  }
  return "";
}
//改变当前显示的颜色
function ChangeCurrentColor(colorStr)
{
  var CurColor=document.getElementById("CurColor");
  CurColor.innerHTML=colorStr;
}
//改变表格背景颜色
function ChangeTableColor(colorStr)
{
   var ShowColor=document.getElementById("ShowColor");
   ShowColor.style.backgroundColor=colorStr;
}
</script>
</head>

<body>
<table width="410" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="59" height="14"><span class="style1">
      <input type="radio" name="radioColor" value="red">
      真红</span></td>
    <td width="61"><span class="style2">
      <input type="radio" name="radioColor" value="yellow">
    金黄</span></td>
    <td width="58"><span class="style3">
      <input type="radio" name="radioColor" value="blue">
纯蓝</span></td>
    <td width="135" valign="top"><div align="center"><span class="style4">列表选择颜色</span></div></td>
    <td width="101" valign="top"><div align="center"><span class="style4">当前颜色</span></div></td>
  </tr>
  <tr>
    <td height="21"><span class="style31">
      <input type="radio" name="radioColor" value="green">
翠绿</span></td>
    <td><span class="style5">
      <input type="radio" name="radioColor" value="white">
羽白</span></td>
    <td><span class="style6">
      <input type="radio" name="radioColor" value="pink">
粉红</span></td>
    <td valign="top"><div align="center">
      <select name="selColor" onChange="selColor_Change(this.options[this.selectedIndex].value);">
          <option selected>列表选择颜色</option>
          <option value="red" >真红</option>
          <option value="yellow" >金黄</option>
          <option value="blue" >纯蓝</option>
          <option value="green" >翠绿</option>
          <option value="white" >羽白</option>
          <option value="pink" >粉红</option>
          <option value="Azure" >天青</option>
          <option value="cyan" >铭绿</option>
          <option value="orange" >橙黄</option>
      </select>
    </div></td>
    <td valign="top"><div id="CurColor" align="center" class="style4">green</div></td>
  </tr>
  <tr>
    <td height="18"><span class="style7">
      <input type="radio" name="radioColor" value="Azure">
天青</span></td>
    <td ><span class="style8">
      <input type="radio" name="radioColor" value="cyan">
铭绿</span></td>
    <td><span class="style9">
      <input type="radio" name="radioColor" value="orange">
    橙黄</span></td>
    <td valign="top"><div align="center"><span class="style4">列表选择颜色</span></div></td>
    <td valign="top"><div align="center">
      <input type="button" name="changeColor" onClick="changeColor_Click();" value="改变颜色">
    </div></td>
  </tr>
</table>
<table id="ShowColor" width="410" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="410" height="310">&nbsp;</td>
  </tr>
</table>
</body>
</html>
改变表格背景颜色的代码
1
©2025, BC-CN.NET
电脑版