jquery table 崩溃不适用于 ie11.035 和 firefox 46.0.1
jquery table collapse don't work on ie11.035 and firefox 46.0.1
一个关于浏览器兼容性的小问题。
我有这段代码可以扩展和缩小 html table 的 tbody:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
$(".expand").click(function () {
$("#mytable tbody").show("slow");
});
$(".collapse").click(function () {
$("#mytable tbody").hide("fast");
});
});
</script>
<center>
<table border="1" width="1200px" id="mytable">
<thead>
<tr>
<td style="border:red 0px solid"></td>
<td><b>Numero</b></td>
<td><b>Data apertura</b></td>
<td><b>Data scadenza</b></td>
<td><b>Data chiusura</b></td>
<td><b>Competenza</b></td>
<td><b>Priorità </b></td>
<td><b>File caricati</b></td>
<td><b>Assegnata a</b></td>
<td><b>Tipo ricontatto</b></td>
<td><b>Stadio</b></td>
<td><b>Stato</b></td>
<td style="width:80px"><a class="expand" href="#"><button type="button" style="width:100%" >Espandi</a></button></td>
</tr>
<tr class="clickable">
<td>Pallino</td>
<td>1-2016</td>
<td>10/09/2016</td>
<td>25/10/2016</td>
<td></td>
<td>caf</td>
<td>alta</td>
<td></td>
<td>delegato</td>
<td>78576</td>
<td>presa in carico</td>
<td>aperta</td>
<td style="width:80px"><a class="collapse" href="#"><button type="button" style="width:100%">Riduci</a></button></td>
</tr>
</thead>
<tbody style="display:none;">
<tr>
<td colspan="2"><b>Descrizione</b></td>
<td colspan="11">testo Descrizione</td>
</tr>
<tr>
<td colspan="2"><b>Note</b></td>
<td colspan="11">testo Note</td>
</tr>
<tr>
<td colspan="2"><b>Note delegato</b></td>
<td colspan="11">Note delegato</td>
</tr>
<tr>
<td colspan="13"><center>
<input name="Modifica" type="submit" value="Modifica"/>
<input type="reset" value="Cancella">
<input type="button" value="Annulla" onclick="window.location='privata.php';"></center>
</td>
</tr>
</tbody>
</table>
它适用于 Chrome 和 Edge,但不适用于 IE 和 Firefox,我不知道为什么。我使用 http://jsfiddle.net/Trufa/b3pTg/1/ 中的代码,该页面在所有提到的浏览器中都有效。
谁能告诉我为什么 运行 我的没有,我该如何解决?
您好,您的 html 代码有一些错误:
请看这个:
<td style="width:80px"><a class="expand" href="#"><button type="button" style="width:100%" >Espandi</a></button></td>
应替换为:
<td style="width:80px"><a class="expand" href="#"><button type="button" style="width:100%" >Espandi</button></a></td>
修改代码后即可使用
此致
一个关于浏览器兼容性的小问题。
我有这段代码可以扩展和缩小 html table 的 tbody:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
$(".expand").click(function () {
$("#mytable tbody").show("slow");
});
$(".collapse").click(function () {
$("#mytable tbody").hide("fast");
});
});
</script>
<center>
<table border="1" width="1200px" id="mytable">
<thead>
<tr>
<td style="border:red 0px solid"></td>
<td><b>Numero</b></td>
<td><b>Data apertura</b></td>
<td><b>Data scadenza</b></td>
<td><b>Data chiusura</b></td>
<td><b>Competenza</b></td>
<td><b>Priorità </b></td>
<td><b>File caricati</b></td>
<td><b>Assegnata a</b></td>
<td><b>Tipo ricontatto</b></td>
<td><b>Stadio</b></td>
<td><b>Stato</b></td>
<td style="width:80px"><a class="expand" href="#"><button type="button" style="width:100%" >Espandi</a></button></td>
</tr>
<tr class="clickable">
<td>Pallino</td>
<td>1-2016</td>
<td>10/09/2016</td>
<td>25/10/2016</td>
<td></td>
<td>caf</td>
<td>alta</td>
<td></td>
<td>delegato</td>
<td>78576</td>
<td>presa in carico</td>
<td>aperta</td>
<td style="width:80px"><a class="collapse" href="#"><button type="button" style="width:100%">Riduci</a></button></td>
</tr>
</thead>
<tbody style="display:none;">
<tr>
<td colspan="2"><b>Descrizione</b></td>
<td colspan="11">testo Descrizione</td>
</tr>
<tr>
<td colspan="2"><b>Note</b></td>
<td colspan="11">testo Note</td>
</tr>
<tr>
<td colspan="2"><b>Note delegato</b></td>
<td colspan="11">Note delegato</td>
</tr>
<tr>
<td colspan="13"><center>
<input name="Modifica" type="submit" value="Modifica"/>
<input type="reset" value="Cancella">
<input type="button" value="Annulla" onclick="window.location='privata.php';"></center>
</td>
</tr>
</tbody>
</table>
它适用于 Chrome 和 Edge,但不适用于 IE 和 Firefox,我不知道为什么。我使用 http://jsfiddle.net/Trufa/b3pTg/1/ 中的代码,该页面在所有提到的浏览器中都有效。
谁能告诉我为什么 运行 我的没有,我该如何解决?
您好,您的 html 代码有一些错误: 请看这个:
<td style="width:80px"><a class="expand" href="#"><button type="button" style="width:100%" >Espandi</a></button></td>
应替换为:
<td style="width:80px"><a class="expand" href="#"><button type="button" style="width:100%" >Espandi</button></a></td>
修改代码后即可使用
此致