新手求助想做一个这样的网页-php教程-PHP中文网

回复讨论(解决方案)

首页

后端开发

php教程

新手求助想做一个这样的网页

Jun 23, 2016 pm 02:18 PM

轮班牌的，当1#双击变红跳到后面的时候，其它列的1#全部变暗下来！再双击变黑后其它的列也自动变黑！每个号码代表一个员工。用什么环境比较好实现啊！

回复讨论(解决方案)

你这个需求很适合用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...不好给你测试大致思路这样应该还是不算难的.

$("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的宽度是一样的，所以直接改变距离左边的距离就可以了

用JS做前端，每一个编号是一个DIV，一个DIV给一个单独的ID，相同编号的DIV给同一个class
双击之后与这个class同名的其它DIV全部变为灰色，然后单独给这个被双击的DIV配一个红色就行
至于移动的效果，DIV的宽度是一样的，所以直接改变距离左边的距离就可以了
我菜的不能再菜了！建网站就会弄！写源码真心是才学不到一星期啊，学习资料下了很多，搞的头大了！可以直接做一个让我借鉴学习吗？

恩刚才看到你的站内信给你写了个小demo

http://www.colg.biz/demo/d2.html

按照你的需求来的
当1#双击变红跳到后面的时候，其它列的1#全部变暗下来！再双击变黑后其它的列也自动变黑！

全部代码

<!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>

登录后复制

谢谢！
项目那个也会动我改了下
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   美雅剪烫工作流水牌






test

<script></script>

<script> <br /> $(document).ready(function(){ <br /> $("td").live("dblclick",function(){ //点某个td时 <br /> var con = $(this).text(); //获取点的是哪个 <br /> if($(this).hasClass("red")){ <br /> $(this).css("color","black").removeClass("red"); //当前的变红, <br /> $("td:contains('"+con+"')").not(this).css("color","black").removeClass("red"); //非当前的同内容的变灰 <br /> }else{ <br /> $(this).css("color","red").addClass("red"); //当前的变红, <br /> $("td:contains('"+con+"')").not(this).css("color","grey").removeClass("red"); //非当前的同内容的变灰 <br /> $(this).siblings().last().after($(this).clone()); //当前节点复制到最后 <br /> $(this).remove(); //当前节点删除 <br /> } <br /> }); <br /> }); <br /> </script>

	美雅剪烫工作流水双击跳牌，双击红色开牌，红色代表该项目在忙，灰色表示该项目没空接
女宾剪吹	5号欧文	6号冬冬	3号杨松	9号杨威	18号小赵
女宾设计	5号欧文	6号冬冬	3号杨松	9号杨威	18号小赵
男宾剪吹	18号小赵	2号张柳	9号杨威	7号威	3号杨松
男宾设计	2号张柳	18号小赵	9号杨威	3号杨松	28号欧阳
技师烫发	22号妙君	17号邓磊	19号石兵
技师染发	22号妙君	17号邓磊	19号石兵
技师洗头	24号海燕	22号妙君	26号巧凤	11号熊芳	25号欣泓	16号华娟	17号邓磊	19号石兵	12号松余
接待	24号海燕	22号妙君	26号巧凤	11号熊芳	25号欣泓	16号华娟	17号邓磊	19号石兵	12号松余