添加行后在表中搜索

如何解决添加行后在表中搜索

嗨,出于某种原因,我的搜索栏不会过滤新行,例如,如果我添加了 2 行具有不同名称的行,如果搜索这些名称之一,则不会被过滤。如果你知道代码中的问题对我有很大帮助

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>
嗨,由于某种原因,我的搜索栏不会过滤新行,例如,如果我添加了 2 行具有不同名称的行,如果搜索这些名称之一,则不会被过滤。如果你知道代码中的问题对我有很大帮助

解决方法

尝试使用 jqGrid 进行搜索过滤

我有一个 source,你可以在那里找到它

     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",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',sorttype:"float"},{name:'total',index:'total',{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> 
,

您必须在 foreach 之前在 searchInput 事件侦听器中定义 rows 和 indexRow。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?