Fatal编程技术网
  • javascript/
  • Javascript 基于多个输入字段筛选表列

Javascript 基于多个输入字段筛选表列

javascript

Javascript 基于多个输入字段筛选表列,javascript,Javascript,任务 我有一个多栏的表格。每列上面都有一个输入字段。我希望筛选每一行，以便表显示至少有一列包含该列上方输入字段中的值的任何行 问题 当我尝试在输入字段中键入值时，表不会过滤。我不确定我的错误在哪里。由于我仍处于学习阶段，任何有关语法或性能的提示都将不胜感激。根据本网站上的各种答案，下面这个最低限度（尚未）工作的例子是我能做的最好的例子 代码 函数性能集（）{ document.getElementById（“inputName”）.value=“”； document.getElementBy

任务

我有一个多栏的表格。每列上面都有一个输入字段。我希望筛选每一行，以便表显示至少有一列包含该列上方输入字段中的值的任何行

问题

当我尝试在输入字段中键入值时，表不会过滤。我不确定我的错误在哪里。由于我仍处于学习阶段，任何有关语法或性能的提示都将不胜感激。根据本网站上的各种答案，下面这个最低限度（尚未）工作的例子是我能做的最好的例子

代码

函数性能集（）{
document.getElementById（“inputName”）.value=“”；
document.getElementById（“inputCity”）.value=“”；
document.getElementById（“inputCountry”）.value=“”；
filterTable（）；
}
函数filterTable（）{
//获取表格行。
让rows=document.querySelector（“#myTable>tbody”）.rows；
//获取要筛选的输入值。
让inputName=document.getElementById（“inputName”）.value.toUpperCase（）；
让inputCity=document.getElementById（“inputCity”）.value.toUpperCase（）；
让inputCountry=document.getElementById（“inputCountry”）.value.toUpperCase（）；
//在行上循环以执行筛选。
让totalRows=rows.length；
for（设i=0；i-1，
rowCity.indexOf（输入城市）>-1，
rowCountry.indexOf（输入国家）>-1
];
//如果上述任何条件为真，则显示该行，
//否则，将无法显示该行。
if（conditionsArray.indexOf（true）>-1）{
行[i]。显示=”；
}否则{
行[i]。显示=“无”；
}
}
}

过滤台试验
重置

顾客
城市
国家
阿尔弗雷德·福特基斯特
柏林
德国
伯格伦兹斯纳布克普
露勒
瑞典
莫特祖马商业中心
墨西哥食品公司。
墨西哥
恩斯特·汉德尔
格拉茨
奥地利
法布里卡国际米兰。萨尔奇卡斯股份有限公司。
马德里
西班牙
加雷里亚·德尔加斯特罗诺莫酒店
巴塞罗那
西班牙
岛屿贸易
考斯
英国
科尼格利希·埃森
勃兰登堡
德国
笑巴克斯酒窖
温哥华
加拿大
马加兹尼营养不良
贝加莫
意大利
北/南
伦敦
英国
巴黎酒店
巴黎
法国
响尾蛇峡谷杂货店
阿尔伯克基
美国
西蒙斯小酒馆
克本哈文
丹麦
大奶酪
波特兰
美国
Vaffeljernet
奥胡斯
丹麦
沃尔斯基·扎贾兹德
华沙
波兰
通过传递事件和特定索引，可以将筛选功能附加到所有输入元素的事件

请尝试以下方法：

函数性能集（）{
document.getElementById（“inputName”）.value=“”；
document.getElementById（“inputCity”）.value=“”；
document.getElementById（“inputCountry”）.value=“”；
filterTable（事件，0）；
}
函数filterTable（事件、索引）{
var filter=event.target.value.toUpperCase（）；
var rows=document.querySelector（“#myTable tbody”）.rows；
对于（变量i=0；i-1&&index==0）| |（secondCol.indexOf（filter）>-1&&index==1）| |（thirdCol.indexOf（filter）>-1&&index==2））{
行[i].style.display=“”；
}否则{
行[i].style.display=“无”；
}      
}
}
document.querySelectorAll（'input.w3 input'）.forEach（函数（el，idx）{
el.addEventListener（'keyup'，函数（e）{
滤波器表（e，idx）；
}，假）；
});


过滤台试验
重置

阿尔弗雷德·福特基斯特
柏林
德国
伯格伦兹斯纳布克普
露勒
瑞典
莫特祖马商业中心
墨西哥食品公司。
墨西哥
恩斯特·汉德尔
格拉茨
奥地利
法布里卡国际米兰。萨尔奇卡斯股份有限公司。
马德里
西班牙
加雷里亚·德尔加斯特罗诺莫酒店
巴塞罗那
西班牙
岛屿贸易
考斯
英国
科尼格利希·埃森
勃兰登堡
德国
笑巴克斯酒窖
温哥华
加拿大
马加兹尼营养不良
贝加莫
意大利
北/南
伦敦
英国
巴黎酒店
巴黎
法国
响尾蛇峡谷杂货店
阿尔伯克基
美国
西蒙斯小酒馆
克本哈文
丹麦
大奶酪
波特兰
美国
Vaffeljernet
奥胡斯
丹麦
沃尔斯基·扎贾兹德
华沙
波兰

通过传递事件和特定索引，可以将筛选功能附加到所有输入元素的事件

请尝试以下方法：



函数性能集（）{
document.getElementById（“inputName”）.v

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<style>

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>



<script>
  function performReset() {
  document.getElementById("myInput").value = "";
  filterTable();
}

function filterTable() {
  var input, filter, table, tr, i,name,country,city;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    //write here which columns you want filter...
    name=tr[i].getElementsByTagName("td")[0];
    city=tr[i].getElementsByTagName("td")[1];
    country=tr[i].getElementsByTagName("td")[2];

    if (name) {
      if (name.innerHTML.toUpperCase().indexOf(filter) > -1 ||city.innerHTML.toUpperCase().indexOf(filter) > -1 || country.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>



<body>
<p class="w3-center"><button id="buttonReset" onclick="performReset()" class="w3-button w3-grey w3-hover-light-grey">Reset</button></p>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="filterTable()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:20%;">City</th>
    <th style="width:20%;">Country</th>
  </tr>
  <tbody>
  <tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>Berlin</td>
    <td>Germany</td>
  </tr>
  <tr class="item">
    <td>Berglunds snabbköp</td>
    <td>Lule </td>
    <td>Sweden</td>
  </tr>
  <tr class="item">
    <td>Centro comercial Moctezuma</td>
    <td>México D.F.</td>
    <td>Mexico</td>
  </tr>
  <tr class="item">
    <td>Ernst Handel</td>
    <td>Graz</td>
    <td>Austria</td>
  </tr>
  <tr class="item">
    <td>FISSA Fabrica Inter. Salchichas S.A.</td>
    <td>Madrid</td>
    <td>Spain</td>
  </tr>
  <tr class="item">
    <td>Galería del gastrónomo</td>
    <td>Barcelona</td>
    <td>Spain</td>
  </tr>
  <tr class="item">
    <td>Island Trading</td>
    <td>Cowes</td>
    <td>UK</td>
  </tr>
  <tr class="item">
    <td>Königlich Essen</td>
    <td>Brandenburg</td>
    <td>Germany</td>
  </tr>
  <tr class="item">
    <td>Laughing Bacchus Wine Cellars</td>
    <td>Vancouver</td>
    <td>Canada</td>
  </tr>
  <tr class="item">
    <td>Magazzini Alimentari Riuniti</td>
    <td>Bergamo</td>
    <td>Italy</td>
  </tr>
  <tr class="item">
    <td>North/South</td>
    <td>London</td>
    <td>UK</td>
  </tr>
  <tr class="item">
    <td>Paris spécialités</td>
    <td>Paris</td>
    <td>France</td>
  </tr>
  <tr class="item">
    <td>Rattlesnake Canyon Grocery</td>
    <td>Albuquerque</td>
    <td>USA</td>
  </tr>
  <tr class="item">
    <td>Simons bistro</td>
    <td>København</td>
    <td>Denmark</td>
  </tr>
  <tr class="item">
    <td>The Big Cheese</td>
    <td>Portland</td>
    <td>USA</td>
  </tr>
  <tr class="item">
    <td>Vaffeljernet</td>
    <td>Århus</td>
    <td>Denmark</td>
  </tr>
  <tr class="item">
    <td>Wolski Zajazd</td>
    <td>Warszawa</td>
    <td>Poland</td>
  </tr>
  </tbody>
</table>
</body>