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);
}
});
}
答案 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);
});
});