javascript的onclick事件求解

答案:3 悬赏:60 手机版

解决时间 2021-05-06 05:44

提问者网友：饥饿走向夜
2021-05-05 18:15

我要做一个网页的一个特效，就是在一个表格中，我点击某一列的时候，那一列的背景颜色就会变成蓝色。然后当我点击另一行时，那一行的背景颜色就变成蓝色，而先前点击过的那一列的背景颜色又变成默认的颜色，谁知道该怎么做呀？谢谢各位大虾了！！

最佳答案

五星知识达人网友：狂恋
2021-05-05 18:41

设置行的背景色很容易，设置<tr>的背景色即可

可以在<tr>中：

但是要改变列的颜色就没那么容易了，因为没有一个标签能代表整个列。所以必须对每一行的相同位置的单元格进行变色，这就需要对每个单元格进行编号了。

全部回答

1楼网友：等灯
2021-05-05 19:36

<html><head><script type="text/javascript">var lineNum=0,colNum=0,lastCol=0;window.onload=function(){ lineNum=document.getElementsByTagName("tr").length; colNum=document.getElementsByTagName("td").length/lineNum; for(i=0;i<document.getElementsByTagName("td").length;i++){ document.getElementsByTagName("td")[i].setAttribute("colNum",i%colNum); document.getElementsByTagName("td")[i].onclick=function(){changeColor(this)}; }}function changeColor(trObj){ var colNew=Number(trObj.getAttribute("colNum")); if(lastCol!=colNew){ removeColor(lastCol); lastCol=colNew; } for(n=0;n<lineNum;n++){ document.getElementsByTagName("td")[colNew+(n*colNum)].style.background="#FF0000"; }}function removeColor(colLast){ for(n=0;n<lineNum;n++){ document.getElementsByTagName("td")[colLast+(n*colNum)].style.background="#FFFFFF"; }}</script><style type="text/css"> table{border-collapse:collapse;} td{border:1px solid #CCC;height:25px;padding:0 20px;} tr{cursor:pointer;}</style></head><body><table id="t"> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> </table></body></html> 写得还不是很简洁，对不住了

2楼网友：天凉才是好个秋
2021-05-05 18:58

给你一个代码，绝对好使。。。

<html> <head> <script type="text/javascript"> function changeColor(ri){ var t=document.getElementById("t"); var rows=t.rows; for(var i=0;i<rows.length;i++){ rows[i].style.background='white'; } rows[ri.rowIndex].style.background='blue'; } </script> <style type="text/css"> table{border-collapse:collapse;} td{border:1px solid #CCC;height:25px;padding:0 20px;} tr{cursor:pointer;} </style> </head>

</html>

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！