试图用Onclick显示一个表

Question

嗨，我有一个表，看起来像这样，主要是php，但遗憾的是，我不得不这样做:

if (!isset ($_SESSION['Saved_contacts']))   
$Kontakte = array (
array ("Hr.", "Fruehauf",   "Dennis", "13.02.2002", "Brucknerweg 34",  5212, "Hausen", '<a href="#" class="Fruehauf"><u>3.6</u></a>'),
array ("Fr.", "Kaufmann",   "Katharina", "04.03.2002", "Neubertbogen 24", 1680, "Romont", "Durchschnitt"),
array ("Hr.", "Fiedler",   "Marcel", "08.16.2002", "Via Stazione 98", 8143, "Stallikon", "Durchschinitt"),
array ("Hr.", "Oster",   "Tim", "08.26.2002", "Via delle Vigne 98", 1773, "Vuaty", "Durchschinitt"),
array ("Fr.", "Eichelberger",   "Tanja", "07.22.2002", "Semperweg 6", 4223, "Blauen", "Durchschinitt"));
else                                        // Falls Session-Variablen bereits vorhanden => diese nehmen!
$Kontakte = $_SESSION['Saved_contacts'];
?>

<div style="width: 80%; min-width: 550px">
<h2>Kontakt des Schülers ...</h2>
<table>
<tr>
<th>Nr.</th>
<th>Anrede</th>
<th>Name</th>
<th>Vorname</th>
<th>Geburtsdatum</th>
<th>Adresse</th>
<th>PLZ</th>
<th>Ort</th>
<th>Durchschnitt</th>
</tr>
<?php
for ($i=0; $i < count($Kontakte); $i++) {   
echo "<tr> <td><em>".($i+1)."</em></td>" . "<td style='text-align: center'>".$Kontakte[$i][0]."</td>" .
"<td>".$Kontakte[$i][1]."</td>" . "<td>".$Kontakte[$i][2]."</td>" . "<td>".$Kontakte[$i][3]."</td>" .
"<td>".$Kontakte[$i][4]."</td>" . "<td>".$Kontakte[$i][5]."</td>" . "<td>".$Kontakte[$i][6]."</td>" . "<td onclick="show("example");">".$Kontakte[$i][7]."</td>" . " <td></tr>";
}
?>
</table>

和我试图得到这个表:

<div class="Note">
<div style="width: 80%; min-width: 550px">
<table class="grade_Fruehauf" style="" id="example">
<tr>
<th>Fruehauf</th>
</tr>
<tr>
<th>Deutsch</th>
<th>3.5</th>
</tr>
<tr>
<th>Math</th>
<th>3.5</th>
</tr>
<tr>
<th>Biologie</th>
<th>3.5</th>
</tr>
<tr>
<th>Französisch</th>
<th>4</th>
</tr>
<tr>
<th>Durchschnitt</th>
<th style="border-top:solid;">3.6
<th>
</tr>
</table>
<div>
</div>

通过javascript的onclick方法出现，所以我使用了这个代码，但由于某种原因它似乎不起作用，我不确定表中的show函数是否不起作用，或者是javascript代码不起作用。

<script>
function show(example) {
var x = document.getElementById(example);
if (window.getComputedStyle(x).visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>

在第一个表的最后一行已经确定了它，但由于某种原因它没有出现。我的onclick代码错了吗?

Answer 1

您是否在浏览器中获得任何控制台错误?

因为如果你返回

"<td onclick="show("example");">"

它将输出

<td onclick="show("example");">

可以看到，第二个"将结束onclick属性，所以当点击发生时，JS将尝试执行命令show(，这显然是无效的。我希望它能引起

Uncaught SyntaxError: Unexpected end of input

点击时出现错误

你要么需要转义内部双引号，或者更简单地在JS中使用单引号，因为它允许:

<td onclick="show('example');">"

将输出

<td onclick="show('example');">

---

另一个更简洁的选择是停止使用老式的内联事件处理程序，并开始使用addEventListener。

如果你给你的<td>s一个类，你可以为他们所有人设置一个监听器，因为似乎你想为他们所有人打开相同的表(他们是由循环生成的，所以我假设页面上有几个):

HTML/PHP:

<td class="showTable">

Javascript

document.addEventListener('DOMContentLoaded', function() {
var tds = document.querySelectorAll(".showExample");
tds.forEach(function(td) {
td.addEventListener('click', function(e) {
var x = document.querySelector("#example");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
});
});
});

如果表一开始是隐藏的，可能会更有意义。

工作演示:

document.addEventListener('DOMContentLoaded', function() {
var tds = document.querySelectorAll(".showExample");
tds.forEach(function(td) {
td.addEventListener('click', function(e) {
var x = document.querySelector("#example");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
});
});
});

<table>
<tr><td class="showExample">Example</td></tr>
<tr><td class="showExample">Example</td></tr>
</table>
<div class="Note">
<div style="width: 80%; min-width: 550px">
<table class="grade_Fruehauf" style="visibility:hidden" id="example">
<tr>
<th>Fruehauf</th>
</tr>
<tr>
<th>Deutsch</th>
<th>3.5</th>
</tr>
<tr>
<th>Math</th>
<th>3.5</th>
</tr>
<tr>
<th>Biologie</th>
<th>3.5</th>
</tr>
<tr>
<th>Französisch</th>
<th>4</th>
</tr>
<tr>
<th>Durchschnitt</th>
<th style="border-top:solid;">3.6
</th>
</tr>
</table>
<div>
</div>
</div>
</div>