设为首页收藏本站
开启辅助访问 切换到宽版

新微赢技术网

 找回密码
 注册
快捷导航
搜索
热搜: 回贴
新微赢技术网»论坛 › 学习网 知识堂 › WEB开发 › ASP › checkbox一项被选中表格背景变颜色
返回列表 发新帖
查看: 82|回复: 2
打印 上一主题 下一主题

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

[复制链接]
CHLOE
跳转到指定楼层
1#
发表于 2010-1-9 05:51:34 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
以下代码功能是：复选框(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>
回复

使用道具 举报

2#
发表于 2010-1-9 05:51:38 | 只看该作者
<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>
改变表格背景颜色的代码
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

申请友链|小黑屋|最新主题|手机版|新微赢技术网 ( 苏ICP备08020429号 )  

GMT+8, 2024-11-18 20:20 , Processed in 0.104982 second(s), 9 queries , Gzip On, Memcache On.

Powered by xuexi

© 2001-2013 HaiAn.Com.Cn Inc. 寰耽

快速回复 返回顶部 返回列表