新微赢技术网
标题:
checkbox一项被选中表格背景变颜色
[打印本页]
作者:
CHLOE
时间:
2010-1-9 05:51
标题:
checkbox一项被选中表格背景变颜色
以下代码功能是：复选框(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>
作者:
.嵿峜繌嗲﹖
时间:
2010-1-9 05:51
<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"> </td>
</tr>
</table>
</body>
</html>
改变表格背景颜色的代码
欢迎光临 新微赢技术网 (http://bbs.weiying.cn/)
Powered by Discuz! X3.2