javascript - 動的に作成されたテーブルで CSS と JQuery を使用するベストプラクティス

Question

MySQL データベースから情報を取得し、PHP を使用して HTML を生成するページがあります。

これはテスト実行にすぎないので、最終ページでは 400 以上の異なる #td[i] と #bubble[i] を使用するため、このような ID を使用することに疑問を持ち始めました。

質問:

私が使用すべきより良い方法はありますか？
マウスのホバー時に一時的にバブルテーブルを表示するための実行可能なオプションですが、クリックすると永続的に (別の td がホバー/クリックされるまで) 表示されます。

脚本：

$(document).ready(function(){
    $("#maintable").show();

    $( "#td1" ).click(function() {
        $("#bubble1").toggle();
        $("#bubble1").css("background-color", "yellow");
    }); 
    $( "#td2" ).click(function() {
        $("#bubble2").toggle();
        $("#bubble2").css("background-color", "yellow");
    }); 
    $( "#td3" ).click(function() {
        $("#bubble3").toggle();
        $("#bubble3").css("background-color", "yellow");
    }); 
    $( "#td4" ).click(function() {
        $("#bubble4").toggle();
        $("#bubble4").css("background-color", "yellow");
    }); 
    $( "#td5" ).click(function() {
        $("#bubble5").toggle();
        $("#bubble5").css("background-color", "yellow");
    }); 
    $( "#td6" ).click(function() {
        $("#bubble6").toggle();
        $("#bubble6").css("background-color", "yellow");
    });     
    });

</head>
<body>
  <h1>Dynamic tables</h1>
  <br>
  <table id="maintable" border="1">
    <tr>
      <td id="td1">TD1</td>
      <td id="td2">TD2</td>
      <td id="td3">TD3</td>
      <tr>

      <td id="td4">TD4</td>
      <td id="td5">TD5</td>
      <td id="td6">TD6</td>
    </tr>
  </table>
  <br><br>

  <table id="bubble1" border="1">
    <td>
    Selected tablepart:<br>
    <b>TD1</b><br>
    Location:<br>
    <b>R1F:D3-4:E1</b><br>
    Connection:<br>
    none <button id="create1">Create</button>
    </td>
  </table>

  <table id="bubble2" border="1">
    <td>
    Selected tablepart:<br>
    <b>TD2</b><br>
    Location:<br>
    <b>R1F:D3-4:E2</b><br>
    Connection:<br>
    none <button id="create2">Create</button>
    </td>
  </table>

  <table id="bubble3" border="1">
    <td>
    Selected tablepart:<br>
    <b>TB3</b><br>
    Location:<br>
    <b>R1F:D3-4:E3</b><br>
    Connection:<br>
    none <button id="create3">Create</button>
    </td>
  </table>

  <table id="bubble4" border="1">
    <td>
    Selected tablepart:<br>
    <b>TB4</b><br>
    Location:<br>
    <b>R1F:D3-4:E4</b><br>
    Connection:<br>
    none <button id="create4">Create</button>
    </td>
  </table>

  <table id="bubble5" border="1">
    <td>
    Selected tablepart:<br>
    <b>TB5</b><br>
    Location:<br>
    <b>R1F:D3-4:E5</b><br>
    Connection:<br>
    none <button id="create5">Create</button>
    </td>
  </table>

  <table id="bubble6" border="1">
    <td>
    Selected tablepart:<br>
    <b>TB6</b><br>
    Location:<br>
    <b>R1F:D3-4:E6</b><br>
    Connection:<br>
    none <button id="create6">Create</button>
    </td>
  </table>

そして私のCSS：

table {
    margin-left:auto; 
    margin-right:auto;
    display: none;
    border: 1px solid black;
    border-collapse: collapse;
}

編集:これまでの最良の解決策:(いくつかの回答を組み合わせたもの) https://jsfiddle.net/Zimpari/3wm01nmL/

score 1 · Accepted Answer

私が言ったように、バブルテーブルに必要なデータが各レコード内に暗黙的に格納されるバージョンを作成しました。

https://jsfiddle.net/tLqbks0c/

    <table id="maintable" border="1">
    <tr>
      <td id="td1" data-bubble='{"part":"TD1","location":"R1F:D3-4:E1"}'>TD1</td>
      <td id="td2" data-bubble='{"part":"TD2","location":"R2F:D3-4:E1"}'>TD2</td>
      <td id="td3" data-bubble='{"part":"TD3","location":"R3F:D3-4:E1"}'>TD3</td>

    </tr>
  </table>

<table id="bubbleTable" border="1" style="display:none;">
    <td>
    Selected tablepart:<br>
    <b class="part"></b><br>
    Location:<br>
    <b class="location"></b><br>
    Connection:<br>
    none <button id="create3">Create</button>
    </td>
  </table>

 $( "#maintable td" ).click(function() {
        $("#bubbleTable").show();
        var bubData=jQuery.parseJSON($(this).attr("data-bubble"));
        console.log(bubData);
        $("#bubbleTable b.part").text(bubData.part);
        $("#bubbleTable b.location").text(bubData.location);
    });

これはかなり大雑把な草案であることを警告しておきます。PHP と MySql でサーバーレンダリングを処理する必要があります。PHP でデータを JSON 形式に変換するのは、かなり簡単です。json_encode()

score 0 · Accepted Answer

うん。これが包括的な jQuery です。動作するはずです。

@ War10ck は正しく、部分文字列の方が優れています。

$('td').each(function(){ //you might want to add a class selector, but whatever
    var mybubble=$('#bubble'+this.id.substring(2));
    $(this).click(function(){
        mybubble.toggle().css('background-color','yellow');
    });
    $(this).mouseover(function(){
        if(mybubble.css('display')=='none'){
            mybubble.toggle().css("background-color", "yellow")
            .attr('data-mouseover','true');
        }
    });
    $(this).mouseout(function(){
        if(mybubble.attr('data-mouseover')=='true'){
            mybubble.toggle().css("background-color", "yellow")
            .attr('data-mouseover','false');
        }
    });
});

score 0 · Accepted Answer

400 の異なる ID を使用することはほとんど問題ありませんが、これらの DOM 要素に特定の一貫した特性がある場合は、classそのような要素に属性を追加する必要があります。そのため、セレクター呼び出しを介してアクセスしようとすると、アクセスjQueryが容易になります。

したがって、データの多い DOM を構築しようとする前であっても、次のことを行う必要があります。

DOM 要素を分割できない要素に分割する
これらの分割できない要素を組み合わせて、より複雑なオブジェクトにする
これらの複雑なオブジェクトの間に階層を構築する

これらの 3 つの手順は、すべてのアプリケーションでかなり役立ちます。

上記で構築しようとしている現在のDOMを考慮して、ここに私の提案があります：

要素class='bubble'に属性を追加します。<table>以来、すべてが存在する一貫した理由を持っているようです
それらの内部には要素があり、アプリケーションの類似性を示すためにを<button>与えることができます。class='bubble-button'
は分割できない要素ですが、buttonと組み合わせて<td>複雑なテーブルデータ要素を取得します。
このようなテーブルデータのコレクションは、テーブルを作成できますbubble。

ヒエラルキーが構築されていく様子をご覧いただければ幸いです。これらすべてを設計する際に、JS の解析が Web アプリケーションのボトルネックではないことを認識する必要があります。手間のかかるDOMの修正です。したがって、多くの ID を持つことができますが、適切なアドレス指定により、DOM ツリーをより効率的にトラバースすることができます。DOM ツリーの階層が悪いと、長期的にはコストがかかります。

clickこれで、およびhoverハンドラーを次のように追加できます。

$('.bubble').on('yourevent', function(e){
    /* handle the click, or onmouseover, or onmouseout events appropriately
     by adding or removing CSS classes */
});

詳細についてはお知らせください。

javascript - 動的に作成されたテーブルで CSS と JQuery を使用するベスト プラクティス

4 に答える 4

Related

Reference

javascript - 動的に作成されたテーブルで CSS と JQuery を使用するベストプラクティス