[英]Dynamically hide/show row data in HTML sortable table
我正在尝试创建一个具有4列ID，描述，文件夹和状态的动态表，以显示程序的输出。 使用DataTable插件，我设法创建了一个多列可排序表。 我面临的问题是，而不是下表：
==========================================
ID | Description |Folder |Status
==========================================
a |description1 |folder1| Pass
a |description1 |folder2| Fail
b |description2 |folder1| Pass
我想创建下表即。 如果2个或更多连续行显示相同的ID，则第一行之后的ID和行描述为空。
==========================================
ID | Description |Folder |Status
==========================================
a |description1 |folder1| Pass
| |folder2| Fail
b |description2 |folder1| Pass
以下是我当前的示例代码：
<!DOCTYPE html>
<html lang = "en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
</head>
<body>
<h2></h2>
<table id="sequence" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th width="10%">ID</th>
<th width="42%">Description</th>
<th width="10%">Status</th>
<th width="10%">Folder</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Description</th>
<th>Status</th>
<th>Folder</th>
</tr>
</tfoot>
<tbody>
<tr>
<td align="center">11</td>
<td>(description/summary here)</td>
<td align="center">Pass</td>
<td align="center">folder1</td>
</tr>
<tr>
<td align="center">11</td>
<td>(description/summary here)</td>
<td align="center">Fail</td>
<td align="center">folder2</td>
</tr>
<tr>
<td align="center">13</td>
<td>(description/summary here)</td>
<td align="center">Pass</td>
<td align="center">folder1</td>
</tr>
<tr>
<td align="center">14</td>
<td>(description/summary here)</td>
<td align="center">Pass</td>
<td align="center">folder3</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#sequence').DataTable({
//For sorting by 1st column
"order": [[0, "asc"]],
//For multi-column sorting
"columnDefs": [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
}, {
targets: [ 1 ],
orderData: [ 1, 0 ]
}, {
targets: [ 3 ],
orderData: [ 3, 0 ]
} ],
stateSave: true,
scrollY: '70vh',
scrollCollapse: true,
paging: false
});
/////////////////////////////////////////////////////////
var rows = $('#sequence tbody >tr');
var columns;
var ID, summary; var prevID = ""; var prevSumm = "";
for (var i = 0; i < rows.length; i++) {
columns = $(rows[i]).find('td');
ID = $(columns[0]).html();
summary = $(columns[1]).html();
console.log(ID);
console.log(summary);
if (ID ==prevID) {
$(columns[0]).css('visibility', 'hidden');
$(columns[1]).css('visibility', 'hidden');
} else {
$(columns[0]).css('visibility', 'visible');
$(columns[1]).css('visibility', 'visible');
prevID = ID; prevSumm = summary;
}
}
///////////////////////////////////////////////////////////////////
});
</script>
该代码在第一次加载时工作良好，但是已设置为hidden表项将永远被隐藏。 因此，我认为每次重新排列显示顺序时都需要执行///////包含的代码。 例如，当顶部的表格根据“文件夹”列重新排序时，应显示出来，即。 当发生重新排列以使没有连续的ID相同时，所有先前隐藏的ID都将重新设置为可见：
==========================================
ID | Description |Folder |Status
==========================================
a |description1 |folder1| Pass
b |description2 |folder1| Pass
a |description1 |folder2| Fail
我在执行此操作时遇到了麻烦。 由于我对javascript和jquery的了解非常有限，并且仅使用DataTables即可生存，因此，非常感谢任何（简单的）解决方案/建议。
只需为订单事件添加事件处理程序。
function compactDataTable() {
var rows = $('#sequence tbody >tr');
var columns;
var ID, summary; var prevID = ""; var prevSumm = "";
for (var i = 0; i < rows.length; i++) {
columns = $(rows[i]).find('td');
ID = $(columns[0]).html();
summary = $(columns[1]).html();
console.log(ID);
console.log(summary);
$(columns[0]).css('visibility', 'visible');
$(columns[1]).css('visibility', 'visible');
if (ID ==prevID) {
$(columns[0]).css('visibility', 'hidden');
$(columns[1]).css('visibility', 'hidden');
} else {
prevID = ID; prevSumm = summary;
}
}
}
$(document).ready(function () {
var dataTable = $('#sequence').DataTable({
//For sorting by 1st column
"order": [[0, "asc"]],
//For multi-column sorting
"columnDefs": [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
}, {
targets: [ 1 ],
orderData: [ 1, 0 ]
}, {
targets: [ 3 ],
orderData: [ 3, 0 ]
} ],
stateSave: true,
scrollY: '70vh',
scrollCollapse: true,
paging: false
});
compactDataTable();
// With Draw event you catch order and filter
dataTable.on( 'draw.dt', compactDataTable);
});
可通过ROW而不是JavaScript的COLUMN排序的HTML表？
[英]HTML table sortable by ROW instead of COLUMN with JavaScript?
html嵌套表隐藏或显示表行，方法是先单击表行td
[英]html nested table hide or show table row by clicking table row first td
显示或隐藏基于复选框数据的HTML列表，Laravel 4
[英]Show or Hide HTML Columns Table based on Checkboxes Data, Laravel 4
html嵌套表隐藏或显示表td，方法是先单击表行td
[英]html nested table hide or show table last td by clicking table row first td
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.