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