克隆 table,删除行,恢复 table
Clone a table, remove rows, restore table
我需要这方面的帮助。
我有一个带有 select-过滤器的 table,每次过滤器更改时,我都需要将 table 重置为其原始状态并设置过滤器 --> 删除未使用的行(因为行不能隐藏对吗?)。
这就是我尝试过的方法,但没有奏效。 tableParts 是包含我的 table 的 div。我发现 change-event 只触发一次,所以在第一个之后不再有警报。我究竟做错了什么?它仍在进行中,所以开关没有完全编程,因为我已经在改变事件上挣扎了...
var originalContent;
$(document).ready(function() {
originalContent = $('#tableParts').clone();
$('#selectState').addEventListener('change', changeFilter());
});
function changeFilter() {
$('#tableParts').replaceWith(originalContent);
switch (this.value) {
case "0":
alert("0");
break;
case "1":
alert("1");
break;
case "2":
alert("2");
break;
case "3":
alert("3");
break;
case "4":
$(".label-danger").closest('tr').remove();
break;
}
}
<div id="tableParts" class="project-list">
<table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>ID</th>
<th>
<select id="selectState" class="input-sm form-control">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>123</td>
<td class="client-status"><span class="label-danger"></span></td>
</tr>
<tr class="footable-odd">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>454</td>
<td class="client-status"><span class="label-new"></span></td>
</tr>
</tbody>
</table>
</div>
var originalContent;
$(document).ready(function() {
originalContent = $('#tableParts').clone();
$('#selectState').change(function(){
changeFilter(this);
});
});
function changeFilter(obj) {
//$('#tableParts').replaceWith(originalContent);
switch ($(obj).val()) {
case "0":
alert("0");
break;
case "1":
alert("1");
break;
case "2":
alert("2");
break;
case "3":
alert("3");
break;
case "4":
$(".label-danger").closest('tr').remove();
break;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tableParts" class="project-list">
<table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>ID</th>
<th>
<select id="selectState" class="input-sm form-control">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>123</td>
<td class="client-status"><span class="label-danger"></span></td>
</tr>
<tr class="footable-odd">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>454</td>
<td class="client-status"><span class="label-new"></span></td>
</tr>
</tbody>
</table>
</div>
行可以隐藏,这是实现过滤器最简单的方法(无需其他库)。
您的代码中有一些错误:
addEventListener()
适用于原生 DOM 元素,不适用于 jQuery 集合。请改用 on()
。
不要调用您作为事件处理程序传递的函数,而只是传递它(没有括号)。
这是一个片段,它使用 toggle()
来 hide/show 匹配过滤器的行:
$(document).ready(function() {
$('#selectState').on('change', changeFilter);
});
function changeFilter() {
var filterValue = this.value;
$('#tableParts tr').slice(1).each(function() {
$(this).toggle($(".client-status", this).text() === filterValue ||
filterValue === '');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tableParts" class="project-list">
<table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>ID</th>
<th>
<select id="selectState" class="input-sm form-control">
<option value="">(all)</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>123</td>
<td class="client-status"><span class="label-danger">1</span></td>
</tr>
<tr class="footable-odd">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>454</td>
<td class="client-status"><span class="label-new">2</span></td>
</tr>
</tbody>
</table>
</div>
我需要这方面的帮助。 我有一个带有 select-过滤器的 table,每次过滤器更改时,我都需要将 table 重置为其原始状态并设置过滤器 --> 删除未使用的行(因为行不能隐藏对吗?)。
这就是我尝试过的方法,但没有奏效。 tableParts 是包含我的 table 的 div。我发现 change-event 只触发一次,所以在第一个之后不再有警报。我究竟做错了什么?它仍在进行中,所以开关没有完全编程,因为我已经在改变事件上挣扎了...
var originalContent;
$(document).ready(function() {
originalContent = $('#tableParts').clone();
$('#selectState').addEventListener('change', changeFilter());
});
function changeFilter() {
$('#tableParts').replaceWith(originalContent);
switch (this.value) {
case "0":
alert("0");
break;
case "1":
alert("1");
break;
case "2":
alert("2");
break;
case "3":
alert("3");
break;
case "4":
$(".label-danger").closest('tr').remove();
break;
}
}
<div id="tableParts" class="project-list">
<table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>ID</th>
<th>
<select id="selectState" class="input-sm form-control">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>123</td>
<td class="client-status"><span class="label-danger"></span></td>
</tr>
<tr class="footable-odd">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>454</td>
<td class="client-status"><span class="label-new"></span></td>
</tr>
</tbody>
</table>
</div>
var originalContent;
$(document).ready(function() {
originalContent = $('#tableParts').clone();
$('#selectState').change(function(){
changeFilter(this);
});
});
function changeFilter(obj) {
//$('#tableParts').replaceWith(originalContent);
switch ($(obj).val()) {
case "0":
alert("0");
break;
case "1":
alert("1");
break;
case "2":
alert("2");
break;
case "3":
alert("3");
break;
case "4":
$(".label-danger").closest('tr').remove();
break;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tableParts" class="project-list">
<table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>ID</th>
<th>
<select id="selectState" class="input-sm form-control">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>123</td>
<td class="client-status"><span class="label-danger"></span></td>
</tr>
<tr class="footable-odd">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>454</td>
<td class="client-status"><span class="label-new"></span></td>
</tr>
</tbody>
</table>
</div>
行可以隐藏,这是实现过滤器最简单的方法(无需其他库)。
您的代码中有一些错误:
addEventListener()
适用于原生 DOM 元素,不适用于 jQuery 集合。请改用on()
。不要调用您作为事件处理程序传递的函数,而只是传递它(没有括号)。
这是一个片段,它使用 toggle()
来 hide/show 匹配过滤器的行:
$(document).ready(function() {
$('#selectState').on('change', changeFilter);
});
function changeFilter() {
var filterValue = this.value;
$('#tableParts tr').slice(1).each(function() {
$(this).toggle($(".client-status", this).text() === filterValue ||
filterValue === '');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tableParts" class="project-list">
<table id="table_participants" class="table footable table-hover" data-page-size="1000" data-filter=#filter>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>ID</th>
<th>
<select id="selectState" class="input-sm form-control">
<option value="">(all)</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>123</td>
<td class="client-status"><span class="label-danger">1</span></td>
</tr>
<tr class="footable-odd">
<td><span class="footable-toggle"></span>
<input type="hidden" name="list[members][0][linked]" value="0">
<input type="checkbox" name="list[members][0][linked]" value="1"> </td>
<td>454</td>
<td class="client-status"><span class="label-new">2</span></td>
</tr>
</tbody>
</table>
</div>