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

回复讨论(解决方案)

首页

后端开发

php教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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号松余

如果要实现多个页面同步，不要一刷新就还原了！要用什么代码呢？

多页面同步那就将排序后的结果存入数据库要显示的地方从数据库读取生成不就可以了吗?

多页面同步那就将排序后的结果存入数据库要显示的地方从数据库读取生成不就可以了吗?

数据库？？B/S啊！

多页面同步那就将排序后的结果存入数据库要显示的地方从数据库读取生成不就可以了吗?

数据库？？B/S啊！听说过没见过啊！

那你描述下你多个页面同步的这个需求大概啥样的 ...

呼唤高手来看下... 不依靠后端我还真不知道怎么做这个...

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7621

CakePHP 教程

1389

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

136

显示更多

Related knowledge

支付宝PHP SDK转账报错：如何解决'Cannot declare class SignData”问题？ Apr 01, 2025 am 07:21 AM

支付宝PHP...

解释PHP中晚期静态结合的概念。 Mar 21, 2025 pm 01:33 PM

文章讨论了PHP 5.3中引入的PHP中的晚期静态结合（LSB），从而允许静态方法的运行时分辨率调用以获得更灵活的继承。 LSB的实用应用和潜在的触摸

在PHP API中说明JSON Web令牌（JWT）及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一种基于JSON的开放标准，用于在各方之间安全地传输信息，主要用于身份验证和信息交换。1.JWT由Header、Payload和Signature三部分组成。2.JWT的工作原理包括生成JWT、验证JWT和解析Payload三个步骤。3.在PHP中使用JWT进行身份验证时，可以生成和验证JWT，并在高级用法中包含用户角色和权限信息。4.常见错误包括签名验证失败、令牌过期和Payload过大，调试技巧包括使用调试工具和日志记录。5.性能优化和最佳实践包括使用合适的签名算法、合理设置有效期、

会话如何劫持工作，如何在PHP中减轻它？ Apr 06, 2025 am 12:02 AM

会话劫持可以通过以下步骤实现：1.获取会话ID，2.使用会话ID，3.保持会话活跃。在PHP中防范会话劫持的方法包括：1.使用session_regenerate_id()函数重新生成会话ID，2.通过数据库存储会话数据，3.确保所有会话数据通过HTTPS传输。

描述扎实的原则及其如何应用于PHP的开发。 Apr 03, 2025 am 12:04 AM

SOLID原则在PHP开发中的应用包括：1.单一职责原则（SRP）：每个类只负责一个功能。2.开闭原则（OCP）：通过扩展而非修改实现变化。3.里氏替换原则（LSP）：子类可替换基类而不影响程序正确性。4.接口隔离原则（ISP）：使用细粒度接口避免依赖不使用的方法。5.依赖倒置原则（DIP）：高低层次模块都依赖于抽象，通过依赖注入实现。