新手求助想做一个这样的网页 轮班牌的,当1#双击变红跳到后面的时候,其它列的1#全部变暗下来!再双击变黑后其它的列也自动变黑!每个号码代表一个员工。用什么环境比较好实现啊! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 你这个需求很适合用jquery做...对于web开发者来说 你这应该叫 对dom进行操作当点击任意一个编号时第一条语句:当前1#变红,其他1#变灰 第二条语句:当前1#移到第五列 其他的向前递补因为不知道你的dom结构,我假设一个$("td").click(function(){ //点某个td时 var con = $(this).text(); //获取点的是哪个 $(this).css("color","red"); //当前的变红, $("td:contains('"+con+"')").not(this).css("color","grey"); //非当前的同内容的变灰 $(this).siblings().last().after($(this).clone()); //当前节点复制到最后 $(this).remove(); //当前节点删除});晚上WOWing...不好给你测试 大致思路这样 应该还是不算难的. 用JS做前端,每一个编号是一个DIV,一个DIV给一个单独的ID,相同编号的DIV给同一个class双击之后与这个class同名的其它DIV全部变为灰色,然后单独给这个被双击的DIV配一个红色就行至于移动的效果,DIV的宽度是一样的,所以直接改变距离左边的距离就可以了 恩 刚才看到你的站内信 给你写了个小demohttp://www.colg.biz/demo/d2.html按照你的需求来的全部代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta charset="utf-8"><title> test</title><style></style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script language="javascript">$(document).ready(function(){ $("td").live("dblclick",function(){ //点某个td时 var con = $(this).text(); //获取点的是哪个 if($(this).hasClass("red")){ $(this).css("color","black").removeClass("red"); //当前的变红, $("td:contains('"+con+"')").not(this).css("color","black").removeClass("red"); //非当前的同内容的变灰 }else{ $(this).css("color","red").addClass("red"); //当前的变红, $("td:contains('"+con+"')").not(this).css("color","grey").removeClass("red"); //非当前的同内容的变灰 $(this).siblings().last().after($(this).clone()); //当前节点复制到最后 $(this).remove(); //当前节点删除 } });});</script></head><body>给CSDN http://bbs.csdn.net/topics/390536589 做的demo<table border=1 width=400> <th> <td colspan="6">工作流水</td> </th> <tr> <td>项目1</td> <td>1#</td> <td>2#</td> <td>3#</td> <td>4#</td> <td>5#</td> <tr> <tr> <td>项目2</td> <td>1#</td> <td>2#</td> <td>3#</td> <td></td> <td></td> <tr> <tr> <td>项目3</td> <td>1#</td> <td>2#</td> <td></td> <td></td> <td>5#</td> <tr> <tr> <td>项目4</td> <td>1#</td> <td>2#</td> <td>3#</td> <td>4#</td> <td>5#</td> <tr> <tr> <td>项目5</td> <td>1#</td> <td>2#</td> <td></td> <td>4#</td> <td></td> <tr> <tr> <td>项目6</td> <td>1#</td> <td>2#</td> <td>3#</td> <td>4#</td> <td>5#</td> <tr> <tr> <td>项目7</td> <td>1#</td> <td></td> <td>3#</td> <td></td> <td>5#</td> <tr> <tr> <td>项目8</td> <td>1#</td> <td>2#</td> <td>3#</td> <td>4#</td> <td>5#</td> <tr></table></body></html> 通过js控制css样子,如果你会写js,这个问题解决就可解决。 全部代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta charset="utf-8"><title> test</title><style></style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script language="javascript">$(document).ready(function(){ $("td").live("dblclick",function(){ //点某个td时 var con = $(this).text(); //获取点的是哪个 if($(this).hasClass("red")){ $(this).css("color","black").removeClass("red"); //当前的变红, $("td:contains('"+con+"')").not(this).css("color","black").removeClass("red"); //非当前的同内容的变灰 }else{ $(this).css("color","red").addClass("red"); //当前的变红, $("td:contains('"+con+"')").not(this).css("color","grey").removeClass("red"); //非当前的同内容的变灰 $(this).siblings().last().after($(this).clone()); //当前节点复制到最后 $(this).remove(); //当前节点删除 } });});</script></head><body>给CSDN http://bbs.csdn.net/topics/390536589 做的demo<table border=1 width=400> <th> <td colspan="6">工作流水</td> </th> <tr> <td>项目1</td> <td>1#</td> <td>2#</td> <td>3#</td> <td>4#</td> <td>5#</td> <tr> <tr> <td>项目2</td> <td>1#</td> <td>2#</td> <td>3#</td> <td></td> <td></td> <tr> <tr> <td>项目3</td> <td>1#</td> <td>2#</td> <td></td> <td></td> <td>5#</td> <tr> <tr> <td>项目4</td> <td>1#</td> <td>2#</td> <td>3#</td> <td>4#</td> <td>5#</td> <tr> <tr> <td>项目5</td> <td>1#</td> <td>2#</td> <td></td> <td>4#</td> <td></td> <tr> <tr> <td>项目6</td> <td>1#</td> <td>2#</td> <td>3#</td> <td>4#</td> <td>5#</td> <tr> <tr> <td>项目7</td> <td>1#</td> <td></td> <td>3#</td> <td></td> <td>5#</td> <tr> <tr> <td>项目8</td> <td>1#</td> <td>2#</td> <td>3#</td> <td>4#</td> <td>5#</td> <tr></table></body></html>谢谢!项目那个也会动我改了下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> 美雅剪烫工作流水牌 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta charset="utf-8"><title> test</title><style></style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script language="javascript">$(document).ready(function(){ $("td").live("dblclick",function(){ //点某个td时 var con = $(this).text(); //获取点的是哪个 if($(this).hasClass("red")){ $(this).css("color","black").removeClass("red"); //当前的变红, $("td:contains('"+con+"')").not(this).css("color","black").removeClass("red"); //非当前的同内容的变灰 }else{ $(this).css("color","red").addClass("red"); //当前的变红, $("td:contains('"+con+"')").not(this).css("color","grey").removeClass("red"); //非当前的同内容的变灰 $(this).siblings().last().after($(this).clone()); //当前节点复制到最后 $(this).remove(); //当前节点删除 } });});</script></head><body><table border=100% width=100%> <th> <td colspan="6">美雅剪烫工作流水双击跳牌,双击红色开牌,红色代表该项目在忙,灰色表示该项目没空接</td> </th> <tr> <th scope="row">女宾剪吹</th> <td>5号欧文</td> <td>6号冬冬</td> <td>3号杨松</td> <td>9号杨威</td> <td>18号小赵</td> <tr> <tr> <th scope="row">女宾设计</th> <td>5号欧文</td> <td>6号冬冬</td> <td>3号杨松</td> <td>9号杨威</td> <td>18号小赵</td> <tr> <tr> <th scope="row">男宾剪吹</th> <td>18号小赵</td> <td>2号张柳</td> <td>9号杨威</td> <td>7号威</td> <td>3号杨松</td> <tr> <tr> <th scope="row">男宾设计</th> <td>2号张柳</td> <td>18号小赵</td> <td>9号杨威</td> <td>3号杨松</td> <td>28号欧阳</td> <tr> <tr> <th scope="row">技师烫发</th> <td>22号妙君</td> <td>17号邓磊</td> <td>19号石兵</td> <tr> <tr><th scope="row">技师染发</th> <td>22号妙君</td> <td>17号邓磊</td> <td>19号石兵</td> <tr> <tr><th scope="row">技师洗头</th> <td>24号海燕</td> <td>22号妙君</td> <td>26号巧凤</td> <td>11号熊芳</td> <td>25号欣泓</td> <td>16号华娟</td> <td>17号邓磊</td> <td>19号石兵</td> <td>12号松余</td> <tr> <tr><th scope="row">接待</th> <td>24号海燕</td> <td>22号妙君</td> <td>26号巧凤</td> <td>11号熊芳</td> <td>25号欣泓</td> <td>16号华娟</td> <td>17号邓磊</td> <td>19号石兵</td> <td>12号松余</td> <tr></table></body></html>如果要实现多个页面同步,不要一刷新就还原了!要用什么代码呢? PHP页面表单处理函数和表单在一个页面上好吗? PHP提交數據進mysql,中文顯示為unicode編碼,怎麼辦呀?! mysql怎么计算时间差(年,月,日) PHP代码嵌入HTML网页的方式是哪四种 求助啊,快来帮帮忙呀。 关于页面之间值的传递 如何实现数据库中得for循环嵌套? 想做个对数据库里的文章调整顺序的程序 PHP书籍大比拼~~~~~给我建议吧! mysql查询的问题,请帮忙 Windows主机运行PHP:failed to open stream: No such file or directory php+jquery做onchange提交动作的问题,请人帮忙看看
第二条语句:当前1#移到第五列 其他的向前递补因为不知道你的dom结构,我假设一个$("td").click(function(){ //点某个td时
var con = $(this).text(); //获取点的是哪个
$(this).css("color","red"); //当前的变红,
$("td:contains('"+con+"')").not(this).css("color","grey"); //非当前的同内容的变灰
$(this).siblings().last().after($(this).clone()); //当前节点复制到最后
$(this).remove(); //当前节点删除
});晚上WOWing...不好给你测试 大致思路这样 应该还是不算难的.
双击之后与这个class同名的其它DIV全部变为灰色,然后单独给这个被双击的DIV配一个红色就行
至于移动的效果,DIV的宽度是一样的,所以直接改变距离左边的距离就可以了
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta charset="utf-8"><title> test</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script language="javascript">
$(document).ready(function(){
$("td").live("dblclick",function(){ //点某个td时
var con = $(this).text(); //获取点的是哪个
if($(this).hasClass("red")){
$(this).css("color","black").removeClass("red"); //当前的变红,
$("td:contains('"+con+"')").not(this).css("color","black").removeClass("red"); //非当前的同内容的变灰
}else{
$(this).css("color","red").addClass("red"); //当前的变红,
$("td:contains('"+con+"')").not(this).css("color","grey").removeClass("red"); //非当前的同内容的变灰
$(this).siblings().last().after($(this).clone()); //当前节点复制到最后
$(this).remove(); //当前节点删除
}
});
});
</script>
</head><body>
给CSDN http://bbs.csdn.net/topics/390536589 做的demo
<table border=1 width=400>
<th>
<td colspan="6">工作流水</td>
</th>
<tr>
<td>项目1</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td>4#</td>
<td>5#</td>
<tr>
<tr>
<td>项目2</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td></td>
<td></td>
<tr>
<tr>
<td>项目3</td>
<td>1#</td>
<td>2#</td>
<td></td>
<td></td>
<td>5#</td>
<tr>
<tr>
<td>项目4</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td>4#</td>
<td>5#</td>
<tr>
<tr>
<td>项目5</td>
<td>1#</td>
<td>2#</td>
<td></td>
<td>4#</td>
<td></td>
<tr>
<tr>
<td>项目6</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td>4#</td>
<td>5#</td>
<tr>
<tr>
<td>项目7</td>
<td>1#</td>
<td></td>
<td>3#</td>
<td></td>
<td>5#</td>
<tr>
<tr>
<td>项目8</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td>4#</td>
<td>5#</td>
<tr>
</table>
</body>
</html>
全部代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta charset="utf-8"><title> test</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script language="javascript">
$(document).ready(function(){
$("td").live("dblclick",function(){ //点某个td时
var con = $(this).text(); //获取点的是哪个
if($(this).hasClass("red")){
$(this).css("color","black").removeClass("red"); //当前的变红,
$("td:contains('"+con+"')").not(this).css("color","black").removeClass("red"); //非当前的同内容的变灰
}else{
$(this).css("color","red").addClass("red"); //当前的变红,
$("td:contains('"+con+"')").not(this).css("color","grey").removeClass("red"); //非当前的同内容的变灰
$(this).siblings().last().after($(this).clone()); //当前节点复制到最后
$(this).remove(); //当前节点删除
}
});
});
</script>
</head><body>
给CSDN http://bbs.csdn.net/topics/390536589 做的demo
<table border=1 width=400>
<th>
<td colspan="6">工作流水</td>
</th>
<tr>
<td>项目1</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td>4#</td>
<td>5#</td>
<tr>
<tr>
<td>项目2</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td></td>
<td></td>
<tr>
<tr>
<td>项目3</td>
<td>1#</td>
<td>2#</td>
<td></td>
<td></td>
<td>5#</td>
<tr>
<tr>
<td>项目4</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td>4#</td>
<td>5#</td>
<tr>
<tr>
<td>项目5</td>
<td>1#</td>
<td>2#</td>
<td></td>
<td>4#</td>
<td></td>
<tr>
<tr>
<td>项目6</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td>4#</td>
<td>5#</td>
<tr>
<tr>
<td>项目7</td>
<td>1#</td>
<td></td>
<td>3#</td>
<td></td>
<td>5#</td>
<tr>
<tr>
<td>项目8</td>
<td>1#</td>
<td>2#</td>
<td>3#</td>
<td>4#</td>
<td>5#</td>
<tr>
</table>
</body>
</html>
谢谢!
项目那个也会动我改了下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 美雅剪烫工作流水牌 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta charset="utf-8"><title> test</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script language="javascript">
$(document).ready(function(){
$("td").live("dblclick",function(){ //点某个td时
var con = $(this).text(); //获取点的是哪个
if($(this).hasClass("red")){
$(this).css("color","black").removeClass("red"); //当前的变红,
$("td:contains('"+con+"')").not(this).css("color","black").removeClass("red"); //非当前的同内容的变灰
}else{
$(this).css("color","red").addClass("red"); //当前的变红,
$("td:contains('"+con+"')").not(this).css("color","grey").removeClass("red"); //非当前的同内容的变灰
$(this).siblings().last().after($(this).clone()); //当前节点复制到最后
$(this).remove(); //当前节点删除
}
});
});
</script>
</head><body><table border=100% width=100%>
<th>
<td colspan="6">美雅剪烫工作流水双击跳牌,双击红色开牌,红色代表该项目在忙,灰色表示该项目没空接</td>
</th>
<tr>
<th scope="row">女宾剪吹</th>
<td>5号欧文</td>
<td>6号冬冬</td>
<td>3号杨松</td>
<td>9号杨威</td>
<td>18号小赵</td>
<tr>
<tr>
<th scope="row">女宾设计</th>
<td>5号欧文</td>
<td>6号冬冬</td>
<td>3号杨松</td>
<td>9号杨威</td>
<td>18号小赵</td>
<tr>
<tr>
<th scope="row">男宾剪吹</th>
<td>18号小赵</td>
<td>2号张柳</td>
<td>9号杨威</td>
<td>7号威</td>
<td>3号杨松</td>
<tr>
<tr>
<th scope="row">男宾设计</th>
<td>2号张柳</td>
<td>18号小赵</td>
<td>9号杨威</td>
<td>3号杨松</td>
<td>28号欧阳</td>
<tr>
<tr>
<th scope="row">技师烫发</th>
<td>22号妙君</td>
<td>17号邓磊</td>
<td>19号石兵</td>
<tr>
<tr>
<th scope="row">技师染发</th>
<td>22号妙君</td>
<td>17号邓磊</td>
<td>19号石兵</td>
<tr>
<tr>
<th scope="row">技师洗头</th>
<td>24号海燕</td>
<td>22号妙君</td>
<td>26号巧凤</td>
<td>11号熊芳</td>
<td>25号欣泓</td>
<td>16号华娟</td>
<td>17号邓磊</td>
<td>19号石兵</td>
<td>12号松余</td>
<tr>
<tr>
<th scope="row">接待</th>
<td>24号海燕</td>
<td>22号妙君</td>
<td>26号巧凤</td>
<td>11号熊芳</td>
<td>25号欣泓</td>
<td>16号华娟</td>
<td>17号邓磊</td>
<td>19号石兵</td>
<td>12号松余</td>
<tr>
</table>
</body>
</html>
如果要实现多个页面同步,不要一刷新就还原了!要用什么代码呢?