Best practice for using CSS and JQuery in dynamically generated tables

Question

Best practice for using CSS and JQuery in dynamically generated tables

I have a page that takes information from a MySQL database and uses PHP, generates HTML.

Since this is just a test run, I started to wonder about the use of the ID, for example, because the last page will use over 400 different #td [i] and #bubble [i].

Questions:

Is there a best practice I should be using?
What might be a viable option to temporarily display bubble tables on hover, but permanently (until another click is over clicked).

Script:

$(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>

And my CSS:

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

EDIT: Better solution: (combined with multiple answers) https://jsfiddle.net/Zimpari/3wm01nmL/

+3

javascript jquery html css

Zimpari May 18 '15 at 13:11

source to share

4 answers

For such a case, it is best to use event delegation. This can be done using the delegate style syntax for .on()

. For example:

$('#maintable').on('click', 'td', function (evt) {
    var index = this.id.substring(2);
    $('#bubble' + index).toggle();
    $('#bubble' + index).css('background-color', 'yellow');
});

This snippet effectively replaces all event handlers used above in the block $(document).ready

. By attaching one event to the parent element, you allow events to bubble up the DOM tree and execute through a single handler.

This also works with dynamically generated content. When new content is added, no new event handlers are needed.

Link: .on()

+1

War10ck May 18 '15 at 13:16

source to share

Uh-huh. Here's an all-encompassing jQuery. Must work.

@ War10ck is right, substring is better.

$('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');
        }
    });
});

0

Scelesto May 18 '15 at 13:24

source to share

It's okay to use 400 different IDs, but if there are certain consistent characteristics of these DOM elements, then you should add an attribute class

to those elements. Thus, when trying to access it using selector calls in jQuery

, it is easier to access.

So, even before you try to build a heavy data DOM, here's what you should be doing

Split your DOM elements into indivisible elements
Combine these indivisible elements into more complex objects
Create a hierarchy among these complex objects

These three steps should help you pretty much in every application.

Given the current DOM that you are trying to build above, I would like to offer the following guidelines:

Add an attribute class='bubble'

to the elements <table>

. Since everyone seems to have a consistent reason for being
Within these they have elements <button>

, it can be assigned a value class='bubble-button'

to show similarities in the application.
So, while it button

is an indivisible element, combine it with <td>

to get a data element of complex tables.
Collecting such table data can make your table bubble

.

Hopefully you can see the hierarchy grow. As you design all of this, you should understand that JS parsing is not a bottleneck in web applications. This is a DOM modification that takes a long time. This way you can have many identifiers, but proper addressing can help you traverse the DOM tree more efficiently. Bad hierarchy in the DOM tree will cost you in the long run.

Now you can add handlers click

and hover

how:

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

Let me know for more clarification.

0

activatedgeek May 18 '15 at 13:32

source to share

Riddler · Accepted Answer · 2015-05-18T16:00:36+0000

As I said, I prepared a version where the data needed for the bubble table is implicitly stored inside each record.

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);
    });

I must warn you that this is a rather crude project. You have to handle server rendering in PHP and MySql. Converting data to JSON format in PHP is pretty easy withjson_encode()

Best practice for using CSS and JQuery in dynamically generated tables

More articles: