Użyłem następującego kodu, który pobiera moją tablicę i konwertuje ją na tabelę 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));

Teraz próbuję utworzyć funkcję filtru / wyszukiwania w tej tabeli. Gdy użytkownik wpisze „K”, powinny zostać wyświetlone tylko góry zaczynające się na literę K. Próbowałem następujących rzeczy:

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";]

    }

}
}

Kiedy łączę listę i używam znacznika wejściowego w moim dokumencie HTML, nie działa. Jestem bardzo nowy w javascript i mam nadzieję, że ktoś z was może mi pomóc w znalezieniu tego, gdzie popełniam błąd lub co powinienem zrobić inaczej.

Dzięki!

0
Mads Rasmussen 5 grudzień 2019, 15:11

1 odpowiedź

Spróbuj podążać za jQuery. txtSearch to identyfikator wejściowego pola tekstowego

$("#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>");
            }
        });

Lub spróbuj śledzić 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";
    }

}

});
0
Anu 5 grudzień 2019, 16:09