在js中的表中搜索不起作用

Search is not working in table in js

本文关键字:搜索 不起作用 js      更新时间:2023-09-26

我有一个表。我想根据输入值过滤表中的值。但是当前该表没有进行过滤。我使用onkeyup函数进行过滤。jsfiddle链接如下。

function filterTable() {
    var q = document.getElementById("tabFilter");
    var v = q.value.toLowerCase();
    var rows = document.getElementsByTagName("tr");
    var on = 0;
    for ( var i = 0; i < rows.length; i++ ) {
        var fullname = rows[i].getElementsByTagName("td");
        fullname = fullname[0].innerHTML.toLowerCase();
        if ( fullname ) {
            if ( v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1 ) ) {
                rows[i].style.display = "";
                on++;
            } else {
                rows[i].style.display = "none";
            }
        }
    }
    var n = document.getElementById("noresults");
    if ( on == 0 && n ) {
        n.style.display = "";
        document.getElementById("qt").innerHTML = q.value;
    } else {
        n.style.display = "none";
    }
}

jsfiddle

  1. 使用textContent而不是innerHTML,因为innerHTML也将选择HTMLElement
  2. 使用index作为2,而不是在第0个索引处,没有要筛选的name
  3. 同时添加fullname &&条件
  4. 在读取index元素之前放置if (fullname.length) {条件

var obj = [{
  Firstname: "Bob",
  Lastname: "Mayer",
  Email: "bob@mayer.com",
  Number: "123456789"
}, {
  Firstname: "Steven",
  Lastname: "Spil",
  Email: "steven@spill.com",
  Number: "987654321"
}, {
  Firstname: "Paul",
  Lastname: "Taucker",
  Email: "paul@tack.com",
  Number: "578954321"
}, {
  Firstname: "computer",
  Lastname: "Tech",
  Email: "comp@tech.com",
  Number: "418741876"
}, {
  Firstname: "User",
  Lastname: "Interface",
  Email: "user@inter.in",
  Number: "949796928"
}];
var editCounter = 0;
var table = document.createElement('table');
table.id = "table";
var headcell = document.createElement('th');
var cell = document.createElement('td');
var input = document.createElement('input');
var tableContainer = document.createElement('div');
document.body.appendChild(tableContainer);
var filter = document.createElement('input');
filter.type = "text";
filter.placeholder = "Filter";
filter.id = "tabFilter";
filter.setAttribute("onkeyup", "filterTable()");
tableContainer.appendChild(filter);
var formContainer = document.createElement('form');
formContainer.id = "details";
document.body.appendChild(formContainer);
function createTable() {
  tableContainer.appendChild(table);
  var row = document.createElement('tr');
  table.appendChild(row);
  headcell = document.createElement('th');
  row.appendChild(headcell);
  headcell.innerHTML = "Select";
  headcell = document.createElement('th');
  row.appendChild(headcell);
  headcell.innerHTML = "Sl.No";
  Object.keys(obj[0]).forEach(function(val) {
    headcell = document.createElement('th');
    row.appendChild(headcell);
    headcell.innerHTML = val;
  });
  for (var i = 0; i < obj.length; i++) {
    var btnSave = document.createElement('button');
    btnSave.innerHTML = "Save";
    var btnEdit = document.createElement('input');
    btnEdit.type = "button";
    btnEdit.value = "Edit";
    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.id = "checkBox";
    var row = document.createElement("tr");
    table.appendChild(row);
    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.appendChild(checkbox);
    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.innerHTML = i;
    for (key in obj[i]) {
      var cell = document.createElement("td");
      row.appendChild(cell);
      cell.innerHTML = obj[i][key];
    }
  }
  return true;
}
createTable();
function filterTable() {
  var q = document.getElementById("tabFilter");
  var v = q.value.toLowerCase();
  var rows = document.getElementsByTagName("tr");
  var on = 0;
  for (var i = 0; i < rows.length; i++) {
    var fullname = rows[i].getElementsByTagName("td");
    if (fullname.length) {
      fullname = fullname[2].textContent.toLowerCase();
      if (fullname && v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1)) {
        rows[i].style.display = "";
        on++;
      } else {
        rows[i].style.display = "none";
      }
    }
  }
}
* {
  font-family: 'verdana'
}
table {
  margin-bottom: 15px
}
input {
  margin: 5px
}
th,
td {
  border: 1px solid #ccc;
  font: 13px'verdana';
  padding: 5px
}
th {
  font-weight: bold
}
table [type="text"],
table [type="email"],
table [type="number"] {
  display: block;
  width: 90px
}
[value="Delete"],
[value="Copy"] {
  display: block
}