Question

使用W3C网站中的表格过滤器，如何修改搜索td = tr[i].getElementsByTagName("td")[0];，以查看其当前构建的第一列[0]以进行过滤？

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


  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

Answer 1

已经有一个循环遍历行（trs）。所以我在它之后添加了另一个循环来遍历列（tds）。

第二个for循环遍历 all 每行中的列。它可以根据OP的要求进行修改。

试试这个（对于所有列）：

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


    for (i = 0; i < tr.length; i++) {

        tds = tr[i].getElementsByTagName("td");
        var found = false;      //----------used to see if any col returns a positiv match
        //---second loop that goes over all tds in a tr ---can be modified as required to go over only certain tds
        for (j = 0; j < tds.length; j++){
             td = tds[j];
             if (td) {
                  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                  found = true;
                  break;
              }
           }
      }

    if(found)
        tr[i].style.display = "";
    else
        tr[i].style.display = "none";

     }
    }

使用JavaScript表过滤器过滤多个列

1 个答案: