Javascript在数据表上显示“所有下拉列表”
问题描述:
我创建了一个隐藏表格行(id="table-row-span"
),它隐藏起来,直到通过点击复选框(id="select_all"
)触发。此时会显示先前隐藏的行,并显示“此页面上显示的所有条目均已选中,请选择此表中的所有条目。”Javascript在数据表上显示“所有下拉列表”
我正在寻找一个脚本,当用户点击了保存箱中的“全部”条目时,每一行都会出现,并显示为勾选标记。屏幕截图也显示了。任何帮助将非常感谢。
答
下面是一个例子,我觉得这是一般的想法
http://output.jsbin.com/fuwole
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select All</title>
<style>
table {
border-collapse: collapse;
width: 500px;
}
table, th, td {
border: 1px solid #444444;
}
#all_selected, #none_selected, #some_selected {
color: #0000ff;
}
#all_selected, #some_selected {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
// @see http://*.com/questions/39705478/javascript-for-show-all-dropdown-on-datatable/39708801#39708801
$(function() {
// the user checks the "check all"
$('#check_all').click(function() {
if($(this).prop('checked')) {
// check all rows
$('.data .checked').prop('checked', true);
// show the correct message
$('.message').hide();
$('#all_selected').show();
}
else {
// uncheck all rows
$('.data .checked').prop('checked', false);
$('.message').hide();
$('#none_selected').show();
}
});
// the user checks a data checkbox
$('.data .checked').click(function() {
// count how many are checked
var rowsChecked = $('.data .checked:checked').length;
var totalRows = $('.data .checked').length;
if(rowsChecked == 0) {
$('.message').hide();
$('#none_selected').show();
$('#check_all').prop('checked', false);
}
else if(rowsChecked == totalRows) {
$('.message').hide();
$('#all_selected').show();
// let's also check the check all
$('#check_all').prop('checked', true);
}
else {
$('.message').hide();
$('#some_selected').show();
$('#check_all').prop('checked', false);
}
});
});
</script>
</head>
<body>
<table>
<tr>
<th style="text-align: left"> <input id="check_all" type="checkbox"/> </th>
<th> Name </th>
<th> Type </th>
</tr>
<tr id="all_selected" class="message">
<td colspan="3"> All entries shown on this page are selected </td>
</tr>
<tr id="none_selected" class="message">
<td colspan="3"> Select all entries in this table </td>
</tr>
<tr id="some_selected" class="message">
<td colspan="3">Some are checked </td>
</tr>
<tr class="data">
<td> <input class="checked" type="checkbox"/> </td>
<td> Row 1 </td>
<td> Type 1 </td>
</tr>
<tr class="data">
<td> <input class="checked" type="checkbox"/> </td>
<td> Row 2 </td>
<td> Type 2 </td>
</tr>
<tr class="data">
<td> <input class="checked" type="checkbox"/> </td>
<td> Row 3 </td>
<td> Type 3 </td>
</tr>
</table>
</body>
</html>
感谢您的帮助,但有什么办法可以点击文本显示所有表因为表格默认只显示10,除非点击25,50或全部。然后点击该表格下方的下拉列表,可以选择要显示的行数显示“all”,并单击复选框(id =“select_all”),将所有行标记为显示。 –