javascript - 根据 id 和文本框文本动态过滤动态生成的列表

Question

工作中

$(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 fiddle 时它可以工作，但是当我在我的 fiddle 上使用它时，它仅在有 0 个表与框中输入的内容时过滤表。它无法识别表中的虚拟机名称。

我正在尝试动态隐藏作为列表传递给函数的表行标记。然后循环遍历此列表并比较在文本框名称 vmfilter 中键入的小写字母，如果在文本框中键入的字母与名称匹配，它将隐藏没有该名称的所有其他表。

例如，我们的虚拟机名称列表是

(test 1, test3vm, highlife, millerlight, beer, nitromilk stout)

用户输入“m”

只有test3vm、millerlight 和 nitromilk 会显示，因为它们有一个 m。我还需要在循环时将列表名称转换为较低的名称。

我将以此作为序言，我真的很糟糕 JavaScript，因为我的尝试只完成了一半，可能要吃午饭了。该函数在所有数据正确显示后启动，并以 200 毫秒的间隔运行

这是我的尝试，但它实际上不起作用，它会隐藏一些字段，但它不能正确重建它们，并且不能正确匹配。我需要它来删除字段，因为删除字段时仍然存在表格空白。

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

}        

Answer 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);
    });
});