Search is not working in table in js

Question

I having a table. I want to filter the values of the table based on the input values. but currently the table is not filtering. i use onkeyup function to filter. jsfiddle link below.

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. Use textContent instead of innerHTML as innerHTML will also select HTMLElement
2. Use index as 2 instead of at 0th index, there is no name column to filter
3. Add fullname && condition as well
4. Place if (fullname.length) { condition before reading its index element.

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
}