Best practice using CSS & JQuery on dynamically created tables

Question

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

Since this is only a test run, I began to wonder about using the ID's like this, because the final page would be using upwards of 400 different #td[i]'s and #bubble[i]'s.

Questions:

Is there a better practice I should be using?
What whould be a viable option for showing the bubble tables temporarily on mouse hover, but permanently (until another td is hovered/clicked) on click.

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: The best solution so far: (Combined from several answers) https://jsfiddle.net/Zimpari/3wm01nmL/

Yeah, I wasn't trying to imply that it is... just looking for the right one :) — Zimpari
– Zimpari, Commented May 18, 2015 at 13:18
looking from a javascript perspective, the solution has been provided. But from a PHP perspective you should may be reconsider. — Riddler
– Riddler, Commented May 18, 2015 at 13:19
Why are you repeating the Bubble table. You know you can use a single table and fill content dynamically. — Riddler
– Riddler, Commented May 18, 2015 at 13:25
@Riddler I don't think I can. I have a database that contains about 20 rows which each contain about 20 values. Each of those values needs to be available upon hovering. Basically it will be a graphical representation of a MySQL table (red background td's = missing link, green background td's = all okay, yellow = maintenance ongoing, etc) Upon hovering on a specific TD it should show a balloon/bubble with some specific information. For me the best way to achieve this is the php loop which outputs the given HTML. If you happen to know a better solution then I'm all ears. :) — Zimpari
– Zimpari, Commented May 18, 2015 at 14:57

Riddler · Accepted Answer · 2015-05-18 16:00:36Z

1

As i said i have cooked up a version where the data required for 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 have to warn you this is a fairly rough draft. You have to handle the server rendering in PHP and MySql . Converting data to JSON format in PHP is fairly easy using json_encode()

answered May 18, 2015 at 16:00

Riddler

5762 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Zimpari Over a year ago

Awesome, thanks, this really helps keep the amount of tables created to a minimum. Very nice. I guess I should add the button in the same way? Like: <td id="td3" data-bubble='{"part":"TD3","location":"R3F:D3-4:E1","button":"create3"}'>TD3</td> But I'm not sure how to add this to the output? just thinking this: <button id="button">Create</button> ---&--- ($("#bubbleTable b.button").text(bubData.button);) - Would this work?

Riddler Over a year ago

Ya that will work I guess. Just play around with the fiddle to find out. I am not with my workstation right now. So can't say exactly. If u find this most helpful you can set as correct answer

Zimpari Over a year ago

I do love your answer the best, but I did combine it with Scelesto's, for it to work with the mouseover, mouseout and click... This seems to be pretty good already, although it can still be made a lot shorter I think: jsfiddle.net/Zimpari/3wm01nmL

Riddler Over a year ago

Good to know. I didn't really know that you needed mouse over functionality as well. And yes it can be made shorter. there is a lot of space for code re usability in your code.

Zimpari Over a year ago

I still haven't got the button thing to work so far, though. Would you happen to know how I could get it to "hold" the right type of value in the button part?

|

War10ck · Accepted Answer · 2015-05-18 13:22:19Z

1

For a case like this, it's best to use event delegation. This can be accomplished by utilizing the delegation 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 the event handlers used above in the $(document).ready block. By attaching the single event to a parent element, you allow the events to bubble up the DOM tree and execute via a single handler.

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

Reference: .on()

edited May 18, 2015 at 13:22

answered May 18, 2015 at 13:16

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

6 Comments

Zimpari Over a year ago

How does this communicate with the #bubble[i] tables?

War10ck Over a year ago

@Zimpari Apologies but I'm not sure what you mean? This event will accomplish the same as the event block that you have above. Is that not the desired output?

Zimpari Over a year ago

Very nice. This actually answers the first part of my question, but... would you also be able to help with the second part of the question?

War10ck Over a year ago

@Zimpari I'll be happy to try. I may need a little clarification on what you're trying to do. Do you want the table to show and hide when moused in and moused out respectively or do you want the table to show and not hide until another row is hovered?

Zimpari Over a year ago

Basically, the rules should be as follows: *Show bubble[i] when mouse is over TD[i] *Hide bubble[i] when mouse is moved away. *Show bubble[i] when TD[i] is clicked (and it doesnt get hidden upon mouse moving away) This is so that a user could see "more" information about the TD on hovering, and would be able to click the button in the "bubble" after making the TD active with his click on that one. (Hope this makes sense)

|

nyumerics · Accepted Answer · 2015-05-18 13:32:57Z

0

It is pretty much OK to use 400 different ID's but then if there are certain consistent characteristics of these DOM elements, then you should add a class attribute to such elements. So that when trying to access it via selector calls in jQuery it is easier access.

So, even before trying to build a data heavy DOM, here is what you should do

Break your DOM elements into indivisible elements
Combine these indivisible elements into more complex objects
Build a hierarchy among these complex objects

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

Considering the current DOM that you are trying to build above, here are my suggestions:

Add a class='bubble' attribute to the <table> elements. Since, all seem to have consistent reason to exist
Inside them, they have <button> elements, it could be given a class='bubble-button' to show the similarity in application.
So while the button is the indivisible element, combine it with <td> to get the complex table data element.
Collection of such table data could make your bubble table.

I hope you see the hierarchy building up. While designing all this, you should realize that JS parsing is not the bottleneck in web applications. It is the modification of the DOM which takes a lot of time. So, you can have a lot of ID's but proper addressing could help you traversing the DOM tree more efficiently. Bad hierarchy in the DOM tree would cost you in the long run.

Now you could add the click and hover handlers as:

$('.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 clarifications.

answered May 18, 2015 at 13:32

nyumerics

6,5873 gold badges31 silver badges52 bronze badges

2 Comments

Zimpari Over a year ago

Since I am pretty new to CSS and JQuery I may not understand all that you said, but building the right kind of hierarchy does seem to be something I should be trying to do here. I will look into it a bit more. Thank you. Basically I would have 3 elements: the TD[i], Bubble[i] and Button[i]. And buttons should be linked (parented [insert right type of word here]) to the bubbletables in a way?

nyumerics Over a year ago

As such Javascript does not provide the OOP kind of structure but all you can say here is that visually <table class='bubble'><td class='bubble-data'><button class='bubble-button'></td></table>. There exists no linking as such.

Scelesto · Accepted Answer · 2015-05-18 15:36:12Z

0

Yup. Here's all-encompassing jQuery. Should 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');
        }
    });
});

edited May 18, 2015 at 15:36

answered May 18, 2015 at 13:24

Scelesto

7956 silver badges13 bronze badges

1 Comment

Zimpari Over a year ago

This almost works, but it does not keep the bubble open after clicking on it, because the mouseout still toggles it off.

Collectives™ on Stack Overflow

Best practice using CSS & JQuery on dynamically created tables

4 Answers 4

9 Comments

6 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

6 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related