gpt4 book ai didi

javascript - jQuery - 在表中使用 (this) 进行滑动切换

转载 作者:行者123 更新时间:2023-12-03 06:15:25 25 4
gpt4 key购买 nike

我想做的是显示/隐藏多个 <tr>OnClick上事件。直接上代码解释更简单。

这是生成 <tr> 的 PHP while 循环

echo "<table class='table table-striped' style='margin-top:70px; width: 60%;'>
<tr>
<th>#</th>
<th>Persona</th>
<th>Luogo di nascita</th>
<th>Data di Nascita</th>
<th>Codice Fiscale</th>
<th>Note</th>
</tr>";
while ($row_anagrafiche=mysql_fetch_row($risultato_query_anagrafica)) {
$query_prestazioni=mysql_query("SELECT * FROM prestazioni WHERE IDpersona='$row_anagrafiche[0]'");
echo "<tr>
<th><div class='showdata'>+</div></th>
<td>" . $row_anagrafiche[1] . " " . $row_anagrafiche[2] . "</td>
<td>" . $row_anagrafiche[3] . "</td></tr>
";
while ($row_prestazioni=mysql_fetch_row($query_prestazioni)) {
echo "<tr class='data' style='display:none;'>
<td>ID Prest.: " . $row_prestazioni[0] . "</td>
<td>Inizio: " . $row_prestazioni[3] . "</td>
<td>Fine: " . $row_prestazioni[4] . "</td>
<td>Importo: " . $row_prestazioni[5] . "€</td>
<td>pagata: "; if ($row_prestazioni[6]==0) {
echo "<font color='red'>No</font>";
}else{
echo "<font color='green'>Si</font>";
}
echo "</td>
<td> " . $row_prestazioni[7] . "</td>
</tr>

";
}
echo "</div>";
}
echo "</table>";
}

这是 <head> 中的 jQuery 代码

<script type="text/javascript"> 
$(document).ready(function() {
$('.showdata').click(function() {
$('.data').slideToggle("fast");
});
});
</script>

现在,当我单击 + 时,每一行都会触发事件,它会在各处显示内容,而不是仅显示感兴趣的行。为了解决这个问题,我想像在 js 中一样传递 this争论,但我不知道该怎么做。

最佳答案

根据您的 JSFiddle,我认为我理解您想要实现的目标。如果你看看我更新的JSFiddle ,您可以看到某些 html 元素具有 data-id 自定义属性。您可以使用 custom data attribute 而不是使用 $(this) 选择器。分离不同的数据集:

<div class='showdata' data-id="1">+</div>

在我的示例中,当您单击 .showdata 元素时,它会查找与相同数据属性值匹配的所有行,然后调用其中的 slideToggle()方法。

所以现在,如果您尝试复制 html 以匹配我的 JSFiddle,希望这就是您所追求的。如果此数据需要是动态的,我将使用 $row_anagrafiche[0] 字段(或简单计数器)中的值作为 data-id 属性中的值.

关于javascript - jQuery - 在表中使用 (this) 进行滑动切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39128166/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com