初心者が助けを求めています、このようなWebページを作りたいです
シフトカードの場合、1# をダブルクリックして赤くなり、後ろにジャンプすると、他の列のすべての 1# が暗くなります。ダブルクリックして黒にすると、他の列も自動的に黒になります。各数字は従業員を表します。どの環境が導入しやすいでしょうか？
ディスカッションへの返信 (解決策)
あなたの要件は jquery の使用に非常に適しています... Web 開発者にとって、これは dom での操作と呼ばれるはずです
任意の番号がクリックされたとき
最初のステートメント : 現在の1# が赤に変わり、他の 1# が灰色に変わります
2 番目のステートメント: 現在の 1# が 5 番目の列に移動され、その他は前方に埋められます
あなたの 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(); //当前节点删除});すごいですね... あなたの代わりにテストすることはできません
あなたのニーズは jquery の使用に非常に適しています... Web 開発者にとっては、それは操作と呼ぶべきです。ドム上
クリック時 任意の数字を使用した場合
最初のステートメント: 現在の 1# が赤に変わり、他の 1# が灰色に変わります
2 番目のステートメント: 現在の 1# が 5 列目と他の 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(); //当前节点删除});がすごいと思います... テストすることはできません 一般的な考えは、それが起こるべきではないということです。難しいですね
ありがとうございます！作ってもらえますか？
各番号は DIV として使用されます。同じ番号を持つ DIV は同じクラスに割り当てられます。このクラスは灰色になり、このキルトに個別に割り当てられます。ダブルクリックした DIV に赤色を追加するだけです
移動効果は、DIV の幅は同じなので、左への距離を変更するだけです。直接
ダブルクリック後、同じ名前を持つ他のすべてのDIVがこのクラスはグレーになり、ダブルクリックしたDIVのみに赤色を割り当てます
移動効果に関しては、DIVの幅は同じなので、左への距離を変更するだけです
それはできません。もう！ウェブサイトを構築するだけです！正直に言うと、大量の学習教材をダウンロードして、ソース コードの書き方を習得したのは 1 週間も経たないうちでした。私が学ぶために直接作成してもらえますか?
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 の外観を制御できる場合、この問題は解決できます。
恩 刚才看到你的站内信 给你写了个小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>谢谢！
项目那个也会动我改了下
| | 美雅剪烫工作流水双击跳牌，双击红色开牌，红色代表该项目在忙，灰色表示该项目没空接 | ||||
|---|---|---|---|---|---|
| 女宾剪吹 | 5号欧文 | 6号冬冬 | 3号杨松 | 9号杨威 | 18号小赵 |
| 女宾设计 | 5号欧文 | 6号冬冬 | 3号杨松 | 9号杨威 | 18号小赵 |
| 男宾剪吹 | 18号小赵 | 2号张柳 | 9号杨威 | 7号威 | 3号杨松 |
| 男宾设计 | 2号张柳 | 18号小赵 | 9号杨威 | 3号杨松 | 28号欧阳 |
| 技师烫发 | ミャオジュン No.22 | デン・レイ No.17 | |||
| No. 17 Deng Lei | No.19 シビン|||||
| No. 12 ソンユ | No. td> | No. 22 ミャオジュン | No. >25シン・ホン | No. 16 ホア・フアンNo. < ;td>No. 12 Songyu | |
