搜索功能表答案

【问题标题】：Search Function to table搜索功能表
【发布时间】：2019-12-05 21:09:25
【问题描述】：

我使用以下代码获取我的数组并将其转换为 HTML 表格。

const MOUNTAINS = [
{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
{name: "Everest", height: 8848, place: "Nepal"},
{name: "Mount Fuji", height: 3776, place: "Japan"},
{name: "Vaalserberg", height: 323, place: "Netherlands"},
{name: "Denali", height: 6168, place: "United States"},
{name: "Popocatepetl", height: 5465, place: "Mexico"},
{name: "Mont Blanc", height: 4808, place: "Italy/France"}
];


function buildTable(data) {
let table = document.createElement("table");

let fields = Object.keys(data[0]);
let headRow = document.createElement("tr");
fields.forEach(function(field) {
  let headCell = document.createElement("th");
  headCell.appendChild(document.createTextNode(field));
  headRow.appendChild(headCell);
});
table.appendChild(headRow);

data.forEach(function(object) {
  let row = document.createElement("tr");
  fields.forEach(function(field) {
    let cell = document.createElement("td");
    cell.appendChild(document.createTextNode(object[field]));
    if (typeof object[field] == "number") {
      cell.style.textAlign = "right";
    }
    row.appendChild(cell);
  });
  table.appendChild(row);
});
return table;
}
document.querySelector("#mountains").appendChild(buildTable(MOUNTAINS));

我现在正在尝试对此表进行过滤/搜索功能。当用户键入“K”时，只应显示以字母 K 开头的山脉。我尝试了以下方法：

function searchTable() {
var input, filter, table, tr, td, i;
input = document.getElementById(myInput);
filter = input.value.toUpperCase();
table = document.getElementsByTagName("table");
tr = tr.getElementsByTagName("tr");
for(i = 0; < tr.length; i++;){
    td = tr[i].getElementsByTagName("td")[0];
    if(td.innerHTML.toUpperCase().indexOf(filter)>-1){
        tr[i].style.display=""
    }else{
        tr[i.style.display="none";]

    }

}
}

当我链接列表并在我的 HTML 文档中使用输入标记时，它不起作用。我对 javascript 非常陌生，希望你们中的任何人都可以帮助我解决我哪里出错或我应该做些什么不同的事情。

谢谢！

【问题讨论】：

标签： javascript arrays search html-table

【解决方案1】：

尝试关注 jquery。 txtSearch 是输入文本字段的ID

$("#txtSearch").on("keyup", function () {
            $("#mountains .divnodata").remove();
            var value = $(this).val().toLowerCase();

            $("#mountains tr td:nth-of-type(1)").filter(function () {
                $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) ==0);// >-1
            });

            if ($("#mountains tr:not(:first):visible").length == 0) {
                $("#mountains").append("<tr class='divnodata'><td colspan='3'>No data</td></tr>");
            }
        });

或尝试使用 Javascript

    var bb = document.getElementById('txtSearch');
bb.addEventListener('keyup', function() {  

    var filter = this.value.toUpperCase();
    var mm = document.getElementById('mountains');
    var input = document.getElementById(txtSearch);
    var tr = mm.getElementsByTagName("tr");
    var td;var index=0;
for(i = 1; i< tr.length; i++){
index++;
    td = tr[index].getElementsByTagName("td")[0];
    if(td.innerHTML.toUpperCase().indexOf(filter)==0){
        tr[index].style.display=""
    }else{
        tr[index].style.display="none";
    }

}

});

【讨论】：