Menu
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/
274
asked Jun 10 '26 08:06
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()
143
answered Jun 11 '26 22:06
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With