如何使用javascript使用值和颜色筛选表

我有一个用于按值筛选表的代码

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

所以它过滤值，这里我想用值和颜色过滤表。例如，如果我键入ABS和RED，它应该检索值为ABS和颜色为RED的列。

---

. 有什么方法可以做到这一点吗？

顺便说一句，您还可以添加AJAX的示例数据，这将成为现实，通过这种方式，我将只制作我赢得的HTML表

您将使用class

和

badge complete

将跨度添加到

td

中，因此只需搜索

innerHTML

而不是

textContent

或

td的
innerText
中的

为了能够搜索“颜色”，获取输入值，如果它匹配
红色
，将其切换到
徽章危险
，并搜索该值。绿色也是如此：

  if (filter === "RED") {
    filter = "badge-danger";
  } else if (filter === "GREEN") {
    filter = "badge-complete";
  }

这是您搜索列的方式，在下面的示例中，这将搜索前3列：

  for (var i = 0; i < rows.length; i++) {
    var Col1 = rows[i].cells[0].innerHTML;
    var Col2 = rows[i].cells[1].innerHTML;
    var Col3 = rows[i].cells[2].innerHTML;
    if (Col1.indexOf(filter) > -1 ||
      Col2.indexOf(filter) > -1 ||
      Col3.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }



名字
姓
要点
吉尔
史密斯
50
前夕
杰克逊
94
亚当
约翰逊
67
博
尼尔森
35
单元格的颜色在HTML中是如何表示的？您需要显示HTML和CSS。。。让我们看看你是如何添加颜色的。你也可以为表格添加HTML文件吗？是的，当然@keidakidayeah，我刚刚更新了代码@ikiKdocument.querySelector（“#myInputtext”）。addEventListener（'keyup'，myFunction，false）；=>我遇到了这样的错误\@neerajasreelaxmi？！好的，您是否将输入的id调整为
myInputtext
，您面前有工作解决方案。。。或者将id更改为事件列表中您不需要的id并为其输入。错误是什么@neerajasreelaxmi
  if (filter === "RED") {
    filter = "badge-danger";
  } else if (filter === "GREEN") {
    filter = "badge-complete";
  }

  for (var i = 0; i < rows.length; i++) {
    var Col1 = rows[i].cells[0].innerHTML;
    var Col2 = rows[i].cells[1].innerHTML;
    var Col3 = rows[i].cells[2].innerHTML;
    if (Col1.indexOf(filter) > -1 ||
      Col2.indexOf(filter) > -1 ||
      Col3.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }

    for (var i = 0; i < rows.length; i++) {
    var Col1 = rows[i].cells[4].innerHTML;
    var Col2 = rows[i].cells[5].innerHTML;
    var Col3 = rows[i].cells[6].innerHTML;
    var Col4 = rows[i].cells[7].innerHTML;
    if (Col1.indexOf(filter) > -1 ||
      Col2.indexOf(filter) > -1 ||
      Col3.indexOf(filter) > -1 ||
      Col4.indexOf(filter) > -1 ) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }