スーパー ユーザー エクスペリエンス テーブル ソート JavaScript 実装コード_JavaScript スキルを達成する

以前インターネットで次のような JS エフェクトを見ました:

編集をクリックしたとき: (申し訳ありません、写真は記事の最後にあります)
この種のリストと編集は両方ともオンになっています同じページ この効果は確かに非常に優れており、ユーザーに予期せぬ素晴らしい体験をもたらすことができます。しかし、それはどのように達成されるのでしょうか?
実際、この効果を実現する方法はたくさんあります。もちろん、JS が良くない場合は、JQuery コンポーネントを使用することもできますが、自分で作成できる方が常に良いと思います。それで、それを実現するのに少し時間を費やしました。実装してみると、この効果はほんの数行の JS コードで実現できることが分かりました。その方法を詳しく書きます。
一般的なアイデア: この効果を実現するには、 に表示または非表示にする ID を指定します。
まず、これを実現するための重要な部分は「ID」です。特定の を表示または非表示にしたいため、それらを区別できる唯一のものは ID 番号です。もちろん、出力します。これはループ「< ;tr style="max-width:90%" id="">」の形式で行われます。次に、JS コード内の ID 番号によってそれらを識別できます。
しかし、重要な質問がまた出てきます。この ID 値をどうやって取得するのでしょうか?私と同じように隠しフィールドを考えた友人がいるかもしれませんが、私も最初は同じように考えていましたが、JSを使用して隠しフィールドの値を取得すると、そのIDが固定されるため、それは機能しません。毎回最初の の ID 番号のみを取得できますが、他のものは取得できません。だから何？ ?ふふ。 。心配しないで。 。 。人には常に道がある。
私たちには「これ」もあります。このキーワードがあれば、「空を恐れることはなくなります」...
このようにして、私たちはJS 値"。 。 。このようにして、 に似た ID 番号を簡単に取得できます (注: 似ている理由は後で説明します)。おそらく、注意深い友人なら、私のコードの後に​​「/m」があることに気づいたでしょう。 。 。これを記述する理由は、

ID と分離しないと値が取得できない (ID はユニークです) ためです。 。
このように、 の ID 番号が「1223」の場合、「onclick」イベントから取得される値は「1223/m」になります。JS の文字列を分割する方法を使用して < ;tr>同じID番号です。 「var vaarray=va.split('/');var id=vaarray[0];」。 。大丈夫。 ID 番号を取得したので、何ができるでしょうか? 。 。ハハハ。以下にそれを示しましょう。 "document.getElementById(id).style.display="block";"
....OK..OVER...
以下は重要なコードです:
JS 部分は次のとおりです:

コードをコピー コードは次のとおりです:

//Display
関数表示(va){
var vaarray=va.split('/');
var id=vaarray[0];
document.getElementById(id).style.display="block"; >var parID=id 'p ';
document.getElementById(parID).style.display="none";//これは、特定の
} です。 >
HTML 部分は次のとおりです:

コードをコピーします コードは次のとおりです: th width="13%">変更

< th width="11%">


表示




別の注: 1 つ以上のコードが可能です。公開時にミスをしました。実装できない場合は、ご連絡ください。
2 上記は私の勉強記録であり、専門的なものではないかもしれません。間違いがあればご指摘ください。間違いなく改善します。