我有一个从 MySQL 数据库获取信息并使用 PHP 生成 HTML 的页面。
由于这只是一次测试运行，我开始考虑是否像这样使用 ID，因为最终页面将使用超过 400 个不同的#td[i] 和#bubble[i]。
问题:
我应该使用更好的做法吗？
什么是在鼠标悬停时临时显示气泡表但在单击时永久显示(直到悬停/单击另一个 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/
最佳答案
正如我所说，我已经编写了一个版本，其中气泡表所需的数据隐式存储在每条记录中。
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 中的服务器呈现。使用 json_encode()
关于javascript - 在动态创建的表格上使用 CSS 和 JQuery 的最佳实践，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30304158/