87,910
社区成员
发帖
与我相关
我的任务
分享单击一个链接，改变表格中的列颜色。
在不改变现有情况下完成这个需求：点击变色，第一列变为灰色，其他俩列不变（也可以直接设置成变为白色之类的）；点击变色2，第二列变为灰色，其他俩列为白色。
现在的情况是只有点击那一下的时候才会变，页面出来后就都恢复为默认色了。请问该怎么改？谢谢了。
现在的情况是只有点击那一下的时候才会变，页面出来后就都恢复为默认色了。请问该怎么改？谢谢了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<script type="text/javascript">
function sort(sTab) {
sTab = document.getElementById("myTable");
for ( var i = 1; i < sTab.rows.length; i++) { // 遍历除第一行外的所有行
sTab.rows[i].cells[0].bgColor = sTab.rows[i].cells[0].bgColor == "" ? "#e4e4e4" : "";
}
}
function sortb(sTab) {
sTab = document.getElementById("myTable");
for ( var i = 1; i < sTab.rows.length; i++) { // 遍历除第一行外的所有行
sTab.rows[i].cells[1].bgColor = sTab.rows[i].cells[0].bgColor == "" ? "#e4e4e4" : "";
}
}
function sortc(sTab) {
sTab = document.getElementById("myTable");
for ( var i = 1; i < sTab.rows.length; i++) { // 遍历除第一行外的所有行
sTab.rows[i].cells[2].bgColor = sTab.rows[i].cells[0].bgColor == "" ? "#e4e4e4" : "";
}
}
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
height="99%">
<tr>
<th>第一列
<div id="tabsortasc">
<a href="NewFile2.jsp?page=1&sort=gray" onclick="sort(this);"><font color="blue" size="2">变色</font></a>
</div>
</th>
<th>第二列
<div id="tabsortasc">
<a href="NewFile2.jsp?page=1&sort=gray" onclick="sortb(this);"><font color="blue" size="2">变色2</font></a>
</div>
</th>
<th>第三列
<div id="tabsortasc">
<a href="NewFile2.jsp?page=1&sort=gray" onclick="sortc(this);"><font color="blue" size="2">变色3</font></a>
</div>
</th>
</tr>
<tr>
<td> aaaa</td>
<td> aaaa</td>
<td> aaaa</td>
</tr>
<tr>
<td> bbbb</td>
<td> bbbb</td>
<td> bbbb</td>
</tr>
<tr>
<td> cccc</td>
<td> cccc</td>
<td> cccc</td>
</tr>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
唯一完美的番茄 2011-10-31
- 打赏
- 举报
[Quote=引用 12 楼 shen823797837 的回复:]
如果要刷新之后还要保持界面无变化的话必须要借助cookies了，我在你的代码基础上修改了一下，你可以看看效果
HTML code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如有疑问,请加QQ:823797837</title>
<scrip……
[/Quote]
非常感谢，想多了没跳出来= =，我再学习下你的例子：）
如果要刷新之后还要保持界面无变化的话必须要借助cookies了，我在你的代码基础上修改了一下，你可以看看效果
HTML code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如有疑问,请加QQ:823797837</title>
<scrip……
[/Quote]
非常感谢，想多了没跳出来= =，我再学习下你的例子：）
闪电侠的博客 2011-10-31
- 打赏
- 举报
还有，这种能在客户端做成的事情最好在客户端做，为何一定要传到后台处理呢？
闪电侠的博客 2011-10-31
- 打赏
- 举报
如果要刷新之后还要保持界面无变化的话必须要借助cookies了，我在你的代码基础上修改了一下，你可以看看效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如有疑问,请加QQ:823797837</title>
<script type="text/javascript">
function change(colNum) {//colNum表示要修改哪一列
sTab = document.getElementById("myTable");
var cols = sTab.rows.item(0).cells.length ;//得到列数
for ( var i = 1; i < sTab.rows.length; i++) {
for(var j=0;j<cols;j++){
if(j==colNum-1){//如果当前遍历到的列恰好等于修改的列，那么就置为红色!
sTab.rows[i].cells[j].bgColor = "red";
}
else{
sTab.rows[i].cells[j].bgColor = "white";//否则，置为白色
}
}
setCookie("col",colNum,30);
}
}
function resume(){
sTab = document.getElementById("myTable");
var colNum = parseInt(getCookie("col"));//colNum表示刷新之间为红色的列号
if(colNum){
var sTab = document.getElementById("myTable");
for ( var i = 1; i < sTab.rows.length; i++) {
sTab.rows[i].cells[colNum-1].bgColor = "red";
}
}
}
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value);
}
function getCookie(c_name){
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1)
c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end))
}
}
return "";
}
</script>
</head>
<body onload="resume()">
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
height="99%">
<tr>
<th>Col1
<div id="tabsortasc">
<a href="#" onclick="change(1);"><font color="blue" size="2">changeColor1</font></a>
</div>
</th>
<th>Col2
<div id="tabsortasc">
<a href="#" onclick="change(2);"><font color="blue" size="2">changeColor2</font></a>
</div>
</th>
<th>Col3
<div id="tabsortasc">
<a href="#" onclick="change(3);"><font color="blue" size="2">changeColor3</font></a>
</div>
</th>
</tr>
<tr>
<td> aaaa</td>
<td> aaaa</td>
<td> aaaa</td>
</tr>
<tr>
<td> bbbb</td>
<td> bbbb</td>
<td> bbbb</td>
</tr>
<tr>
<td> cccc</td>
<td> cccc</td>
<td> cccc</td>
</tr>
</table>
</body>
</html>
唯一完美的番茄 2011-10-31
- 打赏
- 举报
还是没解决= =！
现在是用js得到url中的参数，传给颜色值，可还是只是点击那一下才变色。
现在的问题应该是以刷新就回去了，这个值没存下来呀
现在是用js得到url中的参数，传给颜色值，可还是只是点击那一下才变色。
现在的问题应该是以刷新就回去了，这个值没存下来呀
唯一完美的番茄 2011-10-31
- 打赏
- 举报
[Quote=引用 9 楼 zell419 的回复:]
NewFile2.jsp 这个页面需要做的是什么 ？
默认 第二列变颜色 ？那个需要页面传值了 。
[/Quote]
这个页面是显示这个表格。那就是说这个页面首先要得到传过来的参数，然后修改表格颜色。如果没有得到参数，就都是默认颜色。这么个思路？
NewFile2.jsp 这个页面需要做的是什么 ？
默认 第二列变颜色 ？那个需要页面传值了 。
[/Quote]
这个页面是显示这个表格。那就是说这个页面首先要得到传过来的参数，然后修改表格颜色。如果没有得到参数，就都是默认颜色。这么个思路？
zell419 2011-10-31
- 打赏
- 举报
NewFile2.jsp 这个页面需要做的是什么 ？
默认 第二列变颜色 ？那个需要页面传值了 。
默认 第二列变颜色 ？那个需要页面传值了 。
唯一完美的番茄 2011-10-31
- 打赏
- 举报
[Quote=引用 7 楼 zell419 的回复:]
href="NewFile2.jsp?page=1&sort=gray"
你这样不就链接到了这个.jsp页面去了么 。
你的js没有问题 。
[/Quote]
嗯 这个NewFile2.jsp 就是这页，是不是要6楼朋友的用法？
href="NewFile2.jsp?page=1&sort=gray"
你这样不就链接到了这个.jsp页面去了么 。
你的js没有问题 。
[/Quote]
嗯 这个NewFile2.jsp 就是这页，是不是要6楼朋友的用法？
zell419 2011-10-31
- 打赏
- 举报
href="NewFile2.jsp?page=1&sort=gray"
你这样不就链接到了这个.jsp页面去了么 。
你的js没有问题 。
你这样不就链接到了这个.jsp页面去了么 。
你的js没有问题 。
zqs0605 2011-10-31
- 打赏
- 举报
可以写一个js方法(含参数1) 在页面加载完毕后调用 点击链接时调用该方法参数要与参数1区别开
在js方法里面根据参数做处理
在js方法里面根据参数做处理
唯一完美的番茄 2011-10-31
- 打赏
- 举报
[Quote=引用 4 楼 firstwong 的回复:]
太复杂了，还吃力不讨好。
推荐楼主用广为流行的JavaScript库jQuery。jQuery的主旨是write less, do more. 寥寥几行，就能实现你要的功能。
快去了解下吧：http://www.jquery.com
[/Quote]
。。点错了，点成对我有用了还……
不过怎么说呢，朋友，呵呵……感觉挺逗的……
太复杂了，还吃力不讨好。
推荐楼主用广为流行的JavaScript库jQuery。jQuery的主旨是write less, do more. 寥寥几行，就能实现你要的功能。
快去了解下吧：http://www.jquery.com
[/Quote]
。。点错了，点成对我有用了还……
不过怎么说呢，朋友，呵呵……感觉挺逗的……
firstwong 2011-10-31
- 打赏
- 举报
太复杂了，还吃力不讨好。
推荐楼主用广为流行的JavaScript库jQuery。jQuery的主旨是write less, do more. 寥寥几行，就能实现你要的功能。
快去了解下吧：http://www.jquery.com
推荐楼主用广为流行的JavaScript库jQuery。jQuery的主旨是write less, do more. 寥寥几行，就能实现你要的功能。
快去了解下吧：http://www.jquery.com
唯一完美的番茄 2011-10-31
- 打赏
- 举报
本来只是想大概是这种情况的，http://www.lanrentuku.com/js/table-180.html
唯一完美的番茄 2011-10-31
- 打赏
- 举报
[Quote=引用 1 楼 liangws 的回复:]
楼主的需求是点击某行变色，刷新后，该行还是要变色？
[/Quote]
重新加载这页是不是就相当于又刷新了0.0 。。。这也是我这个问题所在么？那我是不是应该让js修改css？
楼主的需求是点击某行变色，刷新后，该行还是要变色？
[/Quote]
重新加载这页是不是就相当于又刷新了0.0 。。。这也是我这个问题所在么？那我是不是应该让js修改css？
liangws 2011-10-31
- 打赏
- 举报
楼主的需求是点击某行变色，刷新后，该行还是要变色？
