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

Question

我有一张 table 。我想根据输入值过滤表的值。但目前该表没有过滤。我使用 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

Answer 1

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

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
}