1
私は助けが必要です！私はテーブルヘッダーのチェックボックスをチェックしたいのは最初のページだけですが、私のコーディングでは私が持っているすべてのページが動作します。 javascriptが私の現在のページだけをチェックする方法はありますか？私は項目をチェックするためにいくつかの機能を使用し、ページ設定には他を使用します。javascriptのチェックボックスは、すべてのアイテムとすべてのページをチェックしました
function checkItems(checkHeader) {
var checker = document.getElementsByName('check-body');
if (checkHeader.checked)
{
for (var i = 0; i < checker.length; i++)
{
checker[i].checked = true;
}
}
else
{
for (var i = 0; i < checker.length; i++)
{
checker[i].checked = false;
}
}
}
th{
padding-right:20px;
}
.table-bordered {
border: 1px solid #357ebd;
}
.table thead > tr > th {
vertical-align: middle!important;
}
.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th,
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td {
padding: 0 5px !important;
vertical-align: middle;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td td:last-child {
border: 1px solid #357ebd;
}
.table {
margin-bottom: 0!important;
}
th {
color: #ffffff;
background-color: #428bca;
border-color: #357ebd;
}
td:last-child {
text-align: center!important;
}
.form-control{
padding: 0 20px!important;
}
.text-employee-list {
padding-left: 0 !important;
}
th:hover {
cursor: pointer;
text-decoration: underline;
}
.div-employee-list > form {
padding-left: 0 !important;
margin-bottom: 15px;
}
.pg-normal {
color: black;
font-weight: normal;
text-decoration: none;
cursor: pointer;
padding: 6px 12px;
border: 1px solid #ddd;
line-height: 1.42857143;
}
.pg-selected {
color: white;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
background-color: #337ab7;
border-color: #337ab7;
padding: 7px 12px;
line-height: 1.42857143;
}
.pg-first {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pg-last {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
#pageNavPosition {
line-height: 2.5;
}
select.selectpicker {
border: 1px solid #cccccc;
padding: 0 10px;
height: 34px;
border-radius: 4px;
}
.checkbox {
margin-top: 5px;
}
#employee-list {
height: 36px;
margin-bottom: 5px;
}
#search-form {
padding-right: 0;
padding-left: 5px;
margin: 0;
}
.caret {
border-top: 4px solid white;
}
ul{
list-style: none;
display: inline-block;
float: right;
margin: 0;
padding-left: 0;
}
ul li.left{
float: left;
padding: 0 10px;
border: 1px solid grey;
border-radius: 3px;
padding-bottom: 5px;
}
ul li.right{
float: right;
padding: 0 10px;
border: 1px solid grey;
border-radius: 3px;
padding-bottom: 5px;
}
#list{
height: 25px;
width: 150px;
float: right;
}
#show-number{
width: 80px;
float: left;
line-height: 1.5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
<label>
<input type="checkbox" class="checkbox" name="head-check" onclick="checkItems(this);">
</label>
</th>
<th id="ln">LNamae<span class="caret"></span></th>
<th id="fn">FName<span class="caret"></span></th>
<th id="ag">Age<span class="caret"></span></th>
<th>Address</th>
</tr>
</thead>
<tbody id="employee">
<tr class="content">
<td>
<label>
<input type="checkbox" class="checkbox" name="check-body">
</label>
</td>
<td>A</td>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr class="content">
<td>
<label>
<input type="checkbox" class="checkbox" name="check-body">
</label>
</td>
<td>B</td>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr class="content">
<td>
<label>
<input type="checkbox" class="checkbox" name="check-body">
</label>
</td>
<td>C</td>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr class="content">
<td>
<label>
<input type="checkbox" class="checkbox" name="check-body">
</label>
</td>
<td>D</td>
<td>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
<tr class="content">
<td>
<label>
<input type="checkbox" class="checkbox" name="check-body">
</label>
</td>
<td>E</td>
<td>E1</td>
<td>E2</td>
<td>E3</td>
</tr>
</tbody>
</table>
<div id="list">
<div id="show-number"></div>
<ul id="pager" class="pagination">
<li class="left">
<a id='previous' class="current" href="javascript:void(0);" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="right">
<a id='next' href="javascript:void(0);" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
<script>
pageSize = 3;
var i = 1;
var pages = Math.ceil($('.content').length/pageSize);
var totalItems = Math.ceil($('.content').length);
this.showPage = function (page) {
this.currentPage = page;
var from = (page - 1) * pageSize + 1;
var to = from + pageSize - 1;
var pagerHtml;
$(".content").hide();
$(".content").each(function (n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
var element = document.getElementById("show-number");
if (pageSize < totalItems) {
to = pageSize * page
if (to > totalItems) {
pagerHtml = from + " - " + totalItems + " of " + totalItems;
}
else {
pagerHtml = from + " - " + to + " of " + totalItems;
}
element.innerHTML = pagerHtml;
}
else {
pagerHtml = totalItems + " - " + totalItems + " of " + totalItems;
element.innerHTML = pagerHtml;
}
}
showPage(i);
$("#previous").click(function() {
$("#next").removeClass("current");
$(this).addClass("current");
if (i != 1) {
showPage(--i);
}
});
$("#next").click(function() {
$("#previous").removeClass("current");
$(this).addClass("current");
if (i < ($('.content').length)/3) {
showPage(++i);
}
});
</script>
非常にうまくいきます。ありがとうございます。 – YSP
とにかく、次のページの親チェックボックスのチェックを外せますか？ – YSP
正常に動作しているようですが、正しくありません。とにかく感謝します。 – YSP