利用鼠标点击事件控制表格行的背景问题？

henhuaqi 2005-02-23 05:52:36
目前我有一个表格列举了一些资源信息，每行的最左边有一个动态生成的单选按钮，所有的单选按钮的名字都为Choose，按钮的value为每个资源的在数据库的编码m_code,我的目的主要是想在某一行的任意一个地方点鼠标左键，则该行背景色变色，然后对应的单选按钮则处于选中状态，并且将该选中的资源的编码赋值到一个名为TextChoose的文本框里。在任何时候只能选中一种资源，也就是说只有一行的颜色不同与其他行。
不知道哪位大哥知道怎么实现啦？我已经头疼了一天了。
...全文
173 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
henhuaqi 2005-02-25
  • 打赏
  • 举报
 回复
非常感谢楼上的，
现在我发现如果在单选按钮Choose只有一个的时候会出错，出错为Choose[...]为空或者不是对象，这个如何解决呢？
henhuaqi 2005-02-25
  • 打赏
  • 举报
 回复
非常感谢你，也谢谢你的建议，该结帖了！
WWWFIND 2005-02-25
  • 打赏
  • 举报
 回复
可以，但我并不赞同每次点击都遍历一边表格，效率太低，上面的代码更改如下：
<table id=t1>
<tr onclick="trclick(this,1);" ><td><input type=radio name=choose value='1'></td><td>ddddddddddddddd</td></tr>
</table>
<input name=text1>
<script>
function trclick(obj,n){
var t1=document.getElementById('t1');
var text1=document.getElementsByName('text1')[0];
for(var i=0;i<t1.rows.length;i++)
t1.rows(i).bgColor="";
obj.bgColor="red";
document.getElementsByName("choose")[n-1].checked=true;
text1.value=document.getElementsByName("choose")[n-1].value ;
}
</script>
henhuaqi 2005-02-25
  • 打赏
  • 举报
 回复
楼上的很感谢你回答我的问题，你能在下面代码的基础上解决只有一个单选按钮的情况下trclick的解决办法吗？
<<table id=t1>
<tr onclick="trclick(this,1);" ><td><input type=radio name=choose value='1'></td><td>ddddddddddddddd</td></tr>
<tr onclick="trclick(this,2);" ><td><input type=radio name=choose value='2'></td><td>ddddddddddddddd</td></tr>
<tr onclick="trclick(this,3);" ><td><input type=radio name=choose value='3'></td><td>ddddddddddddddd</td></tr>
</table>
<input name=text1>script>
function trclick(obj,n){
var t1=document.getElementById('t1');
var text1=document.getElementsByName('text1')[0];
for(var i=0;i<t1.rows.length;i++)
t1.rows(i).bgColor="";
obj.bgColor="red";
choose[n-1].checked=true;
text1.value=choose[n-1].value;
}
</script>
WWWFIND 2005-02-25
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script>
var selectR=null
//insert Radio
function insertRadio(){
for(var i=0;i<Table1.rows.length;i++){
var obj1=document.createElement("input");
obj1.type="radio";
obj1.id="choose"
obj1.value=parseInt(10000*Math.random()); //set m_code
Table1.rows[i].cells[0].insertBefore(obj1);
Table1.rows[i].onclick=function(){selectRow()} //row onclick
}
}
//select Row
function selectRow(){
cRow=getParent(event.srcElement,"TR")
if(selectR!=null){
if(selectR==cRow){
return
}
else {
selectR.bgColor="";
selectR.style.color="";
selectR.cells[0].all("choose").checked=false;
selectR=null
}
}
cRow.bgColor="blue"; //back color
cRow.style.color="white";//text color
selectR=cRow; //select current row
var cRadio=cRow.cells[0].all("choose");
document.all("chooseText").value =cRadio.value
cRadio.checked=true;
}
//get parent specify tagName
function getParent(myElement,myTagName){
if (myElement.tagName=="BODY") {return false}
if (myElement.tagName==myTagName){
return myElement;
}
else{return getParent(myElement.parentElement,myTagName)}
}

</script>
</HEAD>
<BODY>
<input type=button onclick='insertRadio()' value="生成单选">
<INPUT id=chooseText>
<TABLE id=Table1 cellSpacing=1 cellPadding=1 width="426" border=1 style="WIDTH: 426px; HEIGHT: 75px">
<TR>
<TD id=dd>1</TD>
<TD>北京</TD>
<TD>250</TD></TR>
<TR>
<TD>2</TD>
<TD>上海</TD>
<TD>30</TD></TR>
<TR>
<TD>3</TD>
<TD>天津</TD>
<TD>12</TD></TR></TABLE>

</BODY>
</HTML>
JK_10000 2005-02-24
  • 打赏
  • 举报
 回复
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language=javascript>
var selectedTr=null;
function c1(obj){
obj.style.background='#FFFFFF'; //把点到的那一行变希望的颜色;
if(selectedTr!=null) selectedTr.style.backgroundColor="";
if(selectedTr==obj) selectedTr=null;//加上此句，以控制点击变白，再点击反灰
else selectedTr=obj;
}

</script>
</head>

<body>
单击选中Tr，高亮显示，再单击取消选选中。<input type=button value="选中的是哪一行？" onclick="alert(selectedTr?selectedTr.outerHTML:'没有选中行');">
<table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#cccccc">
<tr onclick="c1(this);">
<td >1　</td>
</tr>
<tr onclick="c1(this);">
<td >2　</td>
</tr>
<tr onclick="c1(this);">
<td >3　</td>
</tr>
</table>
</body>
</html>
JasonJHu 2005-02-24
  • 打赏
  • 举报
 回复
可以在这个函数之前先遍历所有的行更新为原来的颜色，然后再跟新当前这行的颜色为突现颜色
henhuaqi 2005-02-24
  • 打赏
  • 举报
 回复
vivianfdlpw()
你的可以实现选中行背景改变而且相应的radio也选中，但是我选中其他行时之前选中的那一行的背景并没有恢复为之前的颜色，这是为是么？
henhuaqi 2005-02-24
  • 打赏
  • 举报
 回复
myIE不能看错误信息，IE才可以啊，刚才看了一下，错误提示为t1.rows.length为空或者不是对象！！
怎么会没找到呢？
vivianfdlpw 2005-02-24
  • 打赏
  • 举报
 回复
try:

<script>
function trclick(obj,n){
var t1=document.getElementById('t1');
var text1=document.getElementsByName('text1')[0];
for(var i=0;i<t1.rows.length;i++)
t1.rows(i).bgColor="";
obj.bgColor="red";
choose[n-1].checked=true;
text1.value=choose[n-1].value;
}
</script>
vivianfdlpw 2005-02-24
  • 打赏
  • 举报
 回复
左下角状态栏有个错误提示的小图标，双击之
henhuaqi 2005-02-24
  • 打赏
  • 举报
 回复
忘了说明一点，我的表格是在一个层上的，并且是几层表格嵌套在一起的，套了4层，在第4层的表格里。不知道这个有没有影响？
henhuaqi 2005-02-24
  • 打赏
  • 举报
 回复
非常感谢scoutlin(梅川库子) ，
我发现用你的就是对的，但是加在我的代码里就错了，要怎么script的错误怎么才能看到具体出错的地方在哪呢？
citybird888 2005-02-23
  • 打赏
  • 举报
 回复
同意楼上
scoutlin 2005-02-23
  • 打赏
  • 举报
 回复
忘了文本框了

<table id=t1>
<tr onclick="trclick(this,1);" ><td><input type=radio name=choose value='1'></td><td>ddddddddddddddd</td></tr>
<tr onclick="trclick(this,2);" ><td><input type=radio name=choose value='2'></td><td>ddddddddddddddd</td></tr>
<tr onclick="trclick(this,3);" ><td><input type=radio name=choose value='3'></td><td>ddddddddddddddd</td></tr>
</table>
<input name=text1>
<script>
function trclick(obj,n){
for(var i=0;i<t1.rows.length;i++)
t1.rows(i).bgColor="";
obj.bgColor="red";
choose[n-1].checked=true;
text1.value=choose[n-1].value;
}
</script>
scoutlin 2005-02-23
  • 打赏
  • 举报
 回复
<table id=t1>
<tr onclick="trclick(this,1);" ><td><input type=radio name=choose value='1'></td><td>ddddddddddddddd</td></tr>
<tr onclick="trclick(this,2);" ><td><input type=radio name=choose value='2'></td><td>ddddddddddddddd</td></tr>
<tr onclick="trclick(this,3);" ><td><input type=radio name=choose value='3'></td><td>ddddddddddddddd</td></tr>
</table>
<script>
function trclick(obj,n){
for(var i=0;i<t1.rows.length;i++)
t1.rows(i).bgColor="";
obj.bgColor="red";
choose[n-1].checked=true;
}
</script>
JavaScript网页特效范例宝典源码
实例205 在表格中添加行及单元格 322 实例206 删除表中的单元格 324 7.5 表格的特殊效果 325 实例207 透明表格 326 实例208 限制表格的宽度 327 实例209 表格的标题 328 实例210 表格的外阴影 329 实例211 立体表格 ...
java源码包---java 源码 大量 实例
像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java编写的显示器显示模式检测程序 2个目标文件 内容...
jquery鼠标事件+动画效果
它提供一种简便的JavaScript设计模式， 优化HTML文档操作、事件处理、动画设计和Ajax交互。虽然现在的Vue、react框架风靡世界，但是目前也有不少的jQuery的开发者坚持使用jQuery。本课程主要是jQuery实战，主要讲解...
实现鼠标移动表格行上，此行背景变色研究
当我们鼠标移动表格某一个行上，此行背景变色，共找到3中方法，都实现如下效果：一、利用样式CSS表达式在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。完整代码如下：在样式里写...
鼠标指针经过表格时背景变换颜色
上述代码中，第三行代码把获取到的...当表格中单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景颜色，使表格内容显得清晰和一目了然，更容易阅读。下图实现鼠标指针经过时背景变色的效果，具体代码如下。
JavaScript

87,903

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章