javascript - Search is not working in table in js -

i having table. want filter values of table based on input values. table not filtering. use onkeyup function filter. jsfiddle link below.

function filtertable() {     var q = document.getelementbyid("tabfilter");     var v = q.value.tolowercase();     var rows = document.getelementsbytagname("tr");     var on = 0;     ( var = 0; < 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. use textcontent instead of innerhtml innerhtml select htmlelement
2. use index 2 instead of @ 0th index, there no name column filter
3. add fullname && condition well
4. place if (fullname.length) { condition before reading 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;    });      (var = 0; < 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;        (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;    (var = 0; < 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  }