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

轮班牌的，当1#双击变红跳到后面的时候，其它列的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...不好给你测试 大致思路这样  应该还是不算难的.
      

  2.   

    用JS做前端，每一个编号是一个DIV，一个DIV给一个单独的ID，相同编号的DIV给同一个class
    双击之后与这个class同名的其它DIV全部变为灰色，然后单独给这个被双击的DIV配一个红色就行
    至于移动的效果，DIV的宽度是一样的，所以直接改变距离左边的距离就可以了
      

  3.   

    恩 刚才看到你的站内信 给你写了个小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>
      

  4.   

    通过js控制css样子，如果你会写js，这个问题解决就可解决。
      

  5.   


    全部代码<!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>
    如果要实现多个页面同步，不要一刷新就还原了！要用什么代码呢？