根据id和文本框文本动态过滤动态生成的列表
WORKING
$(document).ready(function() {
$("#submit").click(function() {
$.ajax({
url : "/vmstatus/",
type : "POST",
dataType: "json",
data : {
selected_customer : $("#selected_customer").val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success : function(json) {
$('#table-repeat-data').remove();
setInterval(update_powerstatus, 2000);
var on = '<img src={% static "icons/on2.jpg" %}>'
var off = '<img src={% static "icons/off.jpg" %}>'
var sortarrows = '<img src={% static "icons/asc.png" %}>'
$('#table_name').append("<table class='tablesorter table' id='table-repeat-data' data-sortable><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name" +sortarrows+ "</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>Command Status</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState " +sortarrows+ "</b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands</b></th></tr></thead><tbody class='list'>");
for (var index = 0; index < json.vmlist.length; index++) {
var powerOn = '<button type="button" name="PowerOn" id="powerOn" onClick="powerOn1(this)" class="btn btn-success" value="' + json.vmlist[index][2] + '">Power On</button>';
var powerOff = '<button type="button" name="PowerOff" id="powerOff" onClick="Reset_send(this)" class="btn btn-danger" value="' + json.vmlist[index][2] + '">Power Off</button>';
var resetVM = '<button type="button" name="ResetVM" id="ResetVM" onClick="powerOff_send(this)" class="btn btn-warning" value="' + json.vmlist[index][2] + '">ResetVM</button>';
if(json.vmlist[index][1] == 'poweredOn'){
$('#table-repeat-data').append ('<tr><td valign="center" width="35%" id="' + json.vmlist[index][0] + '" class="name">' + json.vmlist[index][0] + '</td><td valign="center" width="35%" id="status' + json.vmlist[index][2] + '">' + json.vmlist[index][3] + '</td><td valign="center" width="10%" id="' + json.vmlist[index][2] + '1">' + on + '</td><td valign="center" width="20%" id="' + json.vmlist[index][2] + '">' + powerOn + ' ' + powerOff + ' ' + resetVM + '</td></tr>');
}else{
$('#table-repeat-data').append ('<tr><td valign="center" width="35%" id="' + json.vmlist[index][0] + '" class="name" >' + json.vmlist[index][0] + '</td><td valign="center" width="35%" id="status' + json.vmlist[index][2] + '">' + json.vmlist[index][3] + '</td><td valign="center" width="10%" id="' + json.vmlist[index][2] + '1">' + off + '</td><td valign="center" width="20%" id="' + json.vmlist[index][2] + '">' + powerOn + ' ' + powerOff + ' ' + resetVM + '</td></tr>');
}
}
},
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText);
}
});
return false;
});
$("#table-repeat-data").tablesorter();
});
function update_powerstatus(){
$.ajax({
url : "/vmstatus/",
type : "POST",
dataType: "json",
data : {
selected_customer : $("#selected_customer").val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success : function(json) {
var on = '<img src={% static "icons/on2.jpg" %}>'
var off = '<img src={% static "icons/off.jpg" %}>'
for (var index = 0; index < json.vmlist.length; index++) {
var powerOn = '<button type="button" name="PowerOn" id="powerOn" onClick="powerOn_send(this)" class="btn btn-success" value="' + json.vmlist[index][2] + '">Power On</button>';
var powerOff = '<button type="button" name="PowerOff" id="powerOff" onClick="powerOff_send(this)" class="btn btn-danger" value="' + json.vmlist[index][2] + '">Power Off</button>';
var resetVM = '<button type="button" name="ResetVM" id="ResetVM" onClick="Reset_send(this)" class="btn btn-warning" value="' + json.vmlist[index][2] + '">ResetVM</button>';
if(json.vmlist[index][1] == 'poweredOn'){
var get_element_id = json.vmlist[index][2] + '1';
var stat_message_id = 'status' + json.vmlist[index][2];
document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
document.getElementById(stat_message_id).innerHTML = json.vmlist[index][3];
document.getElementById(get_element_id).innerHTML = on + "<font color='white'>1</font>";
document.getElementById(json.vmlist[index][2]).innerHTML = powerOn + ' ' + powerOff + ' ' + resetVM;
}else{
var get_element_id = json.vmlist[index][2] + '1';
var stat_message_id = 'status' + json.vmlist[index][2];
document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
document.getElementById(stat_message_id).innerHTML = json.vmlist[index][3];
document.getElementById(get_element_id).innerHTML = off + "<font color='white'>0</font>";
document.getElementById(json.vmlist[index][2]).innerHTML = powerOn + ' ' + powerOff + ' ' + resetVM;
}
}
},
error : function(xhr,errmsg,err) {
console.log('Bad');
console.log(xhr.status + ": " + xhr.responseText);
}
});
var $rows = $("#table-repeat-data tr"),
$filter = $("#filter");
$("#filter").keyup(function () {
var filterText = $filter.val().toLowerCase();
$rows.each(function () {
var $row = $(this);
$row.toggle($row.text().toLowerCase().indexOf(filterText) > -1);
});
});
$("#table-repeat-data").tablesorter();
}
我尝试了zord提供的答案，我仍然在循环函数中调用它，以便值在动态表中更新时更新。要预先回答我在循环函数之外尝试过的任何问题，同样的事情就会发生。当我使用JS小提琴时，它可以正常工作，但是当我在我的网站上使用它时，它只会在有0个表格时过滤表格。它无法识别表中的VM名称。
我正在尝试动态隐藏作为列表传递给函数的表行标记。然后循环浏览此列表并比较在文本框名称vmfilter中键入的小写字母，如果在文本框中键入的字母与名称匹配，则将隐藏所有其他没有该名称的表。
例如我们的虚拟机名称列表是
(test 1, test3vm, highlife, millerlight, beer, nitromilk stout)
，用户输入“m”
只有 test3vm，millerlight和nitromilk 会显示，因为他们有一个m。我还需要将列表名称转换为低位循环。我将在前面加上我真的很喜欢JavaScript，我的尝试只完成了一半，可能会出去吃午饭。这个功能在所有数据正确显示并以200ms间隔运行后启动
这是我的尝试，但它实际上并不起作用，它会隐藏一些字段，但它不能正确地重建它们，并且它不能正确匹配。我需要它来删除字段，因为删除字段时仍有表空白区域。
function checkForMatch(string,array){
var arrKeys = array.length;
var match = false;
var patt;
for (var index = 0; index < array.length; index++) {
patt=new RegExp(" "+array[index][0].toLowerCase()+" ");
if(patt.test(string)){
document.getElementById(array[index][0]).style.visibility = "visible";
console.log(string);
console.log(array[index][0].toLowerCase());
}else{
console.log(array[index][0].toLowerCase());
console.log(string);
document.getElementById(array[index][0]).style.visibility = "hidden";
}
}
}
function vm_filter_name(vmlist){
var name = $('#vmfilter').val().toLowerCase();
if(name == ''){
for (var index = 0; index < vmlist.length; index++) {
document.getElementById(vmlist[index][0]).style.visibility = "visible";
}
}else{
checkForMatch(name, vmlist);
}
}
$(document).ready(function() {
$("#submit").click(function() {
$.ajax({
url : "/vmstatus/",
type : "POST",
dataType: "json",
data : {
selected_customer : $("#selected_customer").val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success : function(json) {
$('#table-repeat-data').remove();
setInterval(update_powerstatus, 2000);
var on = '<img src={% static "icons/on2.jpg" %}>'
var off = '<img src={% static "icons/off.jpg" %}>'
$('#table_name').append("<table class='table' id='table-repeat-data' data-sortable><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>Command Status</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");
for (var index = 0; index < json.vmlist.length; index++) {
var powerOn = '<button type="button" name="PowerOn" id="powerOn" onClick="powerOn1(this)" class="btn btn-success" value="' + json.vmlist[index][5] + '">Power On</button>';
var powerOff = '<button type="button" name="PowerOff" id="powerOff" onClick="Reset_send(this)" class="btn btn-danger" value="' + json.vmlist[index][6] + '">Power Off</button>';
var resetVM = '<button type="button" name="ResetVM" id="ResetVM" onClick="powerOff_send(this)" class="btn btn-warning" value="' + json.vmlist[index][7] + '">ResetVM</button>';
if(json.vmlist[index][8] == 'poweredOn'){
$('#table-repeat-data').append ('<tr id="' + json.vmlist[index][0]+ '"><td valign="center" width="40%" id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td valign="center" width="35%" id="status' + json.vmlist[index][9] + '">' + json.vmlist[index][10] + '</td><td valign="center" width="5%" id="' + json.vmlist[index][11] + '1">' + on + '</td><td valign="center" width="20%" id="' + json.vmlist[index][12] + '">' + powerOn + ' ' + powerOff + ' ' + resetVM + '</td></tr>');
}else{
$('#table-repeat-data').append ('<tr id="' + json.vmlist[index][0]+ '"><td valign="center" width="40%" id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td valign="center" width="35%" id="status' + json.vmlist[index][13] + '">' + json.vmlist[index][14] + '</td><td valign="center" width="5%" id="' + json.vmlist[index][15] + '1">' + off + '</td><td valign="center" width="20%" id="' + json.vmlist[index][16] + '">' + powerOn + ' ' + powerOff + ' ' + resetVM + '</td></tr>');
}
}
},
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText);
}
});
return false;
});
});
function update_powerstatus(){
$.ajax({
url : "/vmstatus/",
type : "POST",
dataType: "json",
data : {
selected_customer : $("#selected_customer").val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success : function(json) {
var on = '<img src={% static "icons/on2.jpg" %}>'
var off = '<img src={% static "icons/off.jpg" %}>'
for (var index = 0; index < json.vmlist.length; index++) {
setInterval(vm_filter_name(json.vmlist), 150);
var powerOn = '<button type="button" name="PowerOn" id="powerOn" onClick="powerOn_send(this)" class="btn btn-success" value="' + json.vmlist[index][17] + '">Power On</button>';
var powerOff = '<button type="button" name="PowerOff" id="powerOff" onClick="powerOff_send(this)" class="btn btn-danger" value="' + json.vmlist[index][18] + '">Power Off</button>';
var resetVM = '<button type="button" name="ResetVM" id="ResetVM" onClick="Reset_send(this)" class="btn btn-warning" value="' + json.vmlist[index][19] + '">ResetVM</button>';
if(json.vmlist[index][20] == 'poweredOn'){
var get_element_id = json.vmlist[index][21] + '1';
var stat_message_id = 'status' + json.vmlist[index][22];
document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
document.getElementById(stat_message_id).innerHTML = json.vmlist[index][23];
document.getElementById(get_element_id).innerHTML = on;
document.getElementById(json.vmlist[index][24]).innerHTML = powerOn + ' ' + powerOff + ' ' + resetVM;
}else{
var get_element_id = json.vmlist[index][25] + '1';
var stat_message_id = 'status' + json.vmlist[index][26];
document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
document.getElementById(stat_message_id).innerHTML = json.vmlist[index][27];
document.getElementById(get_element_id).innerHTML = off;
document.getElementById(json.vmlist[index][28]).innerHTML = powerOn + ' ' + powerOff + ' ' + resetVM;
}
}
},
error : function(xhr,errmsg,err) {
console.log('Bad');
console.log(xhr.status + ": " + xhr.responseText);
}
});
}
1 个答案:
答案 0 :(得分：1)
这是一个表行过滤的简单示例。我希望这会有所帮助。
您可以在此处试用：jsfiddle。
var $rows = $("#table tr"),
$filter = $("#filter");
$("#filter").keyup(function () {
var filterText = $filter.val().toLowerCase();
$rows.each(function () {
var $row = $(this);
$row.toggle($row.text().toLowerCase().indexOf(filterText) > -1);
});
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？