ホームページ > 記事 > バックエンド開発 > 初心者が助けを求めています、このようなWebページを作りたいです

初心者が助けを求めています、このようなWebページを作りたいです

WBOYオリジナル: 2016-06-23 14:18:40828ブラウズ

シフトカードの場合、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 の幅は同じなので、左への距離を変更するだけです。直接

フロントエンドとしてJSを使用し、各番号はDIVであり、DIVは別のIDであり、同じ番号を持つ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>

谢谢！
项目那个也会动我改了下
f711898ef6b6983a32e6504b09776ced
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
  b2386ffb911b14667cb8f0f91ea547a7 美雅剪烫工作流水牌 6e916e0f7d1e588d4f442bf645aedb2f
  d36fa0f1dbba5b2162777168a21072fb
  61f4f6fb59cec3bbbb2468f7fbaf8930
  cbf9515979bbab75aafd1735ddbf1509
  d9f181c875f363a7ee11b6e456dae281
  4d0d87937f6c83b675e896c64d3eb7c9

b2386ffb911b14667cb8f0f91ea547a7 test6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89

531ac245ce3e4fe3d50054a55f265927
567ffd4cc47abd5e1d1457724876d48b2cacc6d41bbb37262a98f745aa00fbf0

5e18004130b03fd4aaa01fe61a84ebb1
$(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();   //当前节点删除
}
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

76451adb9087e8579bf6303359739927
b4d429308760b6c2d20d6300079ed38e
73ae156838081b045e180f234cee3cf0美雅剪烫工作流水双击跳牌，双击红色开牌，红色代表该项目在忙，灰色表示该项目没空接b90dd5946f0946207856a8a37f441edf
01c3ce868d2b3d9bce8da5c1b7e41e5b
a34de1251f0d9fe1e645927f19a896e8
5dbd02de284688538b67d13ace6e8513女宾剪吹01c3ce868d2b3d9bce8da5c1b7e41e5b
b6c5a531a458a2e790c1fd6421739d1c5号欧文b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c6号冬冬b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c3号杨松b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c9号杨威b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c18号小赵b90dd5946f0946207856a8a37f441edf
a34de1251f0d9fe1e645927f19a896e8
a34de1251f0d9fe1e645927f19a896e8
5dbd02de284688538b67d13ace6e8513女宾设计01c3ce868d2b3d9bce8da5c1b7e41e5b
b6c5a531a458a2e790c1fd6421739d1c5号欧文b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c6号冬冬b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c3号杨松b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c9号杨威b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c18号小赵b90dd5946f0946207856a8a37f441edf
a34de1251f0d9fe1e645927f19a896e8
a34de1251f0d9fe1e645927f19a896e8
5dbd02de284688538b67d13ace6e8513男宾剪吹01c3ce868d2b3d9bce8da5c1b7e41e5b
b6c5a531a458a2e790c1fd6421739d1c18号小赵b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c2号张柳b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c9号杨威b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c7号威b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c3号杨松b90dd5946f0946207856a8a37f441edf
a34de1251f0d9fe1e645927f19a896e8
a34de1251f0d9fe1e645927f19a896e8
5dbd02de284688538b67d13ace6e8513男宾设计01c3ce868d2b3d9bce8da5c1b7e41e5b
b6c5a531a458a2e790c1fd6421739d1c2号张柳b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c18号小赵b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c9号杨威b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c3号杨松b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c28号欧阳b90dd5946f0946207856a8a37f441edf
a34de1251f0d9fe1e645927f19a896e8
a34de1251f0d9fe1e645927f19a896e8
5dbd02de284688538b67d13ace6e8513技师烫发01c3ce868d2b3d9bce8da5c1b7e41e5b
b6c5a531a458a2e790c1fd6421739d1cミャオジュン No.22b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cデン・レイ No.17b90dd5946f0946207856a8a37f441edf
a34de1251f0d9fe1e645927f19a896e8
4f9670cddef5f7a9b3bc8097590d04bf技術者ヘアダイ
b6c5a531a458a2e790c1fd6421739d1cNo. 17 Deng Leib90dd5946f0946207856a8a37f441edf No.19 シビンb90dd5946f0946207856a8a37f441edf
a34de1251f0d9fe1e645927f19a896e8 4f9670cddef5f7a9b3bc8097590d04bfNo.24 ハイヤン< /td; 25 シン・ホンb90dd5946f0946207856a8a37f441edf 16 フア・ファンb90dd5946f0946207856a8a37f441edf 17 デン・レイb90dd5946f0946207856a8a37f441edf No.
b6c5a531a458a2e790c1fd6421739d1cNo. 12 ソンユb90dd5946f0946207856a8a37f441edf
4f9670cddef5f7a9b3bc8097590d04bfレセプションb6c5a531a458a2e790c1fd6421739d1c No. td>
No. 22 ミャオジュンb90dd5946f0946207856a8a37f441edf
No. >25シン・ホンb90dd5946f0946207856a8a37f441edf No. 16 ホア・フアンb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c No. < ;td>No. 12 Songyua34de1251f0d9fe1e645927f19a896e8
73a6ac4ed44ffec12cee46588e518a5e 複数のページを同期しないでください。リフレッシュしました！どのようなコードを使用する必要がありますか?

複数ページ同期の場合は、ソート結果をデータベースに保存します。

複数ページ同期の場合、表示する場所はデータベースに保存されます。表示される場所は

データベースから読み込んで生成するだけで十分ではないでしょうか？ ? BS!

複数ページの同期次に、ソートされた結果をデータベースに保存し、表示されるデータベースから読み取って生成しますか?

データベース? ? BS! 聞いたことがありますか、見たことがありませんか?

それから、複数のページを同期する必要性について説明していただけますか...

専門家に電話して見てもらいましょう... バックエンドに依存せずにこれを行う方法が本当にわかりません...

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHP 変数名の前に $$ が 2 つありますが、これは何をするのでしょうか?次の記事：PHP 変数名の前に $$ が 2 つありますが、これは何をするのでしょうか?

続きを見る

初心者が助けを求めています、このようなWebページを作りたいです

ディスカッションへの返信 (解決策)

関連記事