Search in Table after adding a Row

user_15358853 0
Viewed 90

Hi for some reason my search bar doesn't filter new rows, for example if I add 2 rows with different names, if a search for one of those names it won't be filtered. It would help me a lot if you know the problem in the code

let searchInput = document.getElementById("search");
let rows = document.querySelectorAll("tbody tr");
let filter = document.getElementById("filter");
let table = document.getElementById("Table");
let form = document.getElementById("newDonor");
let indexRow = rows.length;


filter.addEventListener("change", function columnIndex(){
   let column = filter.value;

   searchInput.addEventListener("keyup", function (event) {
    let inputText = event.target.value.toLowerCase();
    rows.forEach((row) => {
      row.querySelectorAll("td")[column].textContent.toLowerCase().includes(inputText)
        ? (row.style.display = "table-row")
        : (row.style.display = "none")
    });
  });
})

function addDonor(){
    let addRow = Table.insertRow();
    let dataCol1 = addRow.insertCell();
    let dataCol2 = addRow.insertCell();
    let dataCol3 = addRow.insertCell();
    let dataCol4 = addRow.insertCell();
    let dataCol5 = addRow.insertCell();
    let dataCol6 = addRow.insertCell();
    let dataCol7 = addRow.insertCell();
    let dataCol8 = addRow.insertCell();
    let dataCol9 = addRow.insertCell();
    let dataCol10 = addRow.insertCell();
    dataCol1.innerHTML = indexRow + 1;
    dataCol2.innerHTML = document.getElementById("name").value;
    dataCol3.innerHTML = document.getElementById("name").value;
    dataCol4.innerHTML = document.getElementById("name").value;
    dataCol5.innerHTML = document.getElementById("name").value;
    dataCol6.innerHTML = document.getElementById("name").value;
    dataCol7.innerHTML = document.getElementById("name").value;
    dataCol8.innerHTML = document.getElementById("name").value;
    dataCol9.innerHTML = document.getElementById("name").value;
    dataCol10.innerHTML = `<input type="button" value="Editar"></input><input type="button" value="Remover"></input>`
}


form.addEventListener("submit",(e) => {
    e.preventDefault();
})
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.Table {
  border-collapse: collapse;
  margin: 200px auto;
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  min-width: 1000px;
  & thead tr {
    background-color: #009879;
    color: #ffffff;
    font-weight: 100;
    text-align: left;
  }
  & tbody tr:hover {
    background-color: #f1f1f1;
  }
  & :is(td, th) {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
  }
}
.ac {
  text-align: center;
}
.search {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 190px;
  & .filter {
    position: relative;
    top: 10px;
    left: 10px;
    & label {
      font-family: "Roboto", sans-serif;
    }
    & select {
      border: none;
      cursor: pointer;
      font-family: "Roboto", sans-serif;
      font-size: 15px;
    }
    & select:focus,
    select:active {
      border: none;
      outline: none;
    }
  }
}
#search {
  border: none;
  outline: none;
  width: 800px;
  padding: 10px 0;
  font-size: 20px;
  border-bottom: 3px solid #009879;
  &::placeholder {
    font-family: "Roboto", sans-serif;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="tabla.css" />
  </head>
  <body>
    <form onsubmit="addDonor()" id="newDonor" autocomplete="off">
      <div>
        <label for="name">Name</label>
        <input id="name" type="text" name="name" placeholder="Name..." />
      </div>
      <div>
        <input type="submit" name="submit" value="Enviar" />
      </div>
    </form>
    <div class="search">
      <input type="text" name="search" id="search" placeholder="Buscar..." />
      <div class="filter">
        <label for="filter">Sort by: </label>
        <select name="filter" id="filter">
          <option value="">Select</option>
          <option value="0">Number</option>
          <option value="1">Name</option>
          <option value="2">Age</option>
          <option value="3">Gender</option>
          <option value="4">Blood Type</option>
          <option value="5">Donation</option>
          <option value="6">Address</option>
          <option value="7">Phone</option>
          <option value="8">Date</option>
        </select>
      </div>
    </div>

    <table class="Table" id="Table">
      <thead>
        <tr>
          <th>No.</th>
          <th>Donor</th>
          <th>Age</th>
          <th>Gender</th>
          <th>Blood type</th>
          <th>Donation (lt)</th>
          <th>Adress</th>
          <th>Phone</th>
          <th>Date</th>
          <th>Modify</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Jane Doe</td>
          <td class="ac">23</td>
          <td class="ac">F</td>
          <td class="ac">B+</td>
          <td class="ac">2.5</td>
          <td>New York</td>
          <td class="ac">5556662222</td>
          <td class="ac">10/08/2020</td>
          <td><input type="button" value="Edit"></input><input type="button" value="Remove"></input></td>
        </tr>
        <tr>
          <td>2</td>
          <td>John Doe</td>
          <td class="ac">25</td>
          <td class="ac">M</td>
          <td class="ac">A+</td>
          <td class="ac">1.5</td>
          <td>New Jersey</td>
          <td class="ac">1113334444</td>
          <td class="ac">10/09/2020</td>
          <td><input type="button" value="Edit"></input><input type="button" value="Remove"></input></td>
        </tr>
      </tbody>
    </table>

    <script src="tabla.js"></script>
  </body>
</html>
Hi, for some reason my search bar doesn't filter new rows, for example if I add 2 rows with different names, if a search for one of those names it won't be filtered. It would help me a lot if you know the problem in the code

searchbar html-table html javascript
2 Answers

Try to Use jqGrid for Search Filter

I got a source where you can find it

     var mydata = [
    {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
    {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"blah",note:"stuff",tax:"10.00",total:"210.00"},

];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 10,
rowList: [10,20,30],
   colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   colModel:[
       {name:'id',index:'id', width:60, sorttype:"int"},
       {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
       {name:'name',index:'name', width:100},
       {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
       {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},        
       {name:'total',index:'total', width:80,align:"right",sorttype:"float"},        
       {name:'note',index:'note', width:150, sortable:false}        
   ],
   pager: "#pager",
   viewrecords: true,
   autowidth: true,
   height: 'auto',
   caption: "Test Grid"
});

jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });



<table id="list"></table>
<div id="pager"></div>
user_86210270

You have to define rows and indexRow in the searchInput event listener before foreach.

user_153315950
Related