為什么我的帶有可折疊行的嵌套表顯示不正確？
[英]Why my nested table with collapsible rows is not displaying correctly?
問題描述
我正在嘗試實現一個帶有可折疊行的嵌套表，但它沒有正確顯示。 這是我的 JavaScript：
<script>
function fnFormatDetails(table_id, html) {
var sOut = "<table id=\"exampleTable_" + table_id + "\">";
sOut += html;
sOut += "</table>";
return sOut;
}
var iTableCounter = 1;
var oTable;
var oInnerTable;
var TableHtml;
$(document).ready(function() {
TableHtml = $("#exampleTable").html();
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
nCloneTd.className = "center";
$('#exampleTable thead tr').each(function() {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
$('#exampleTable tbody tr').each(function() {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
var oTable = $('#exampleTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0]
}],
"aaSorting": [
[1, 'asc']
]
});
$('#exampleTable tbody td img').live('click', function() {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
this.src = "http://i.imgur.com/SD7Dz.png";
oTable.fnClose(nTr);
} else {
this.src = "http://i.imgur.com/d4ICC.png";
oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');
oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
iTableCounter = iTableCounter + 1;
}
});
});
</script>
這是我正在顯示的 HTML 表：
<table id="exampleTable">
<thead>
<tr>
<th>Year</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>2012</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2012</td>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>2012</td>
<td>March</td>
<td>$80</td>
</tr>
</tbody>
</table>
我用於腳本和樣式的鏈接：
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
它根本不顯示任何表格，只顯示行中的純文本。 知道這里有什么問題嗎？
PS我正在使用來自這個jsFiddle的代碼： http://jsfiddle.net/DoDSoftware/WwDg8/820/
1 個解決方案
解決方案1
1 已采納 2020-07-08 12:21:44
您應該首先將主要參考 jquery 腳本。 您的代碼中缺少此內容。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
然后您的表格將顯示為正確格式。
接下來，您有一個圖像點擊錯誤。 將.live() function 轉換為 an.on() function，因為.live() 已從 jquery 1.9 和 onsward 中刪除
$('#exampleTable').on('click', 'tbody td img', function() {
這是完整的代碼，Firefox 78.0.1 中沒有錯誤
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="exampleTable">
<thead>
<tr>
<th>Year</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>2012</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2012</td>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>2012</td>
<td>March</td>
<td>$80</td>
</tr>
</tbody>
</table>
<script>
function fnFormatDetails(table_id, html) {
var sOut = "<table id=\"exampleTable_" + table_id + "\">";
sOut += html;
sOut += "</table>";
return sOut;
}
var iTableCounter = 1;
var oTable;
var oInnerTable;
var TableHtml;
$(document).ready(function() {
TableHtml = $("#exampleTable").html();
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
nCloneTd.className = "center";
$('#exampleTable thead tr').each(function() {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
$('#exampleTable tbody tr').each(function() {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
var oTable = $('#exampleTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0]
}],
"aaSorting": [
[1, 'asc']
]
});
//$('#exampleTable tbody td img').live('click', function() {
$('#exampleTable').on('click', 'tbody td img', function() {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
this.src = "http://i.imgur.com/SD7Dz.png";
oTable.fnClose(nTr);
} else {
this.src = "http://i.imgur.com/d4ICC.png";
oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');
oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
iTableCounter = iTableCounter + 1;
}
});
});
</script>
</body>
</html>
使用jQuery的可折疊表格行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.