Question

我目前正在忙于一个项目，该项目有一个带游戏的html表，以及它们推出的年份。我正在尝试创建一个按钮，单击该按钮将隐藏2016年未启动的任何行。

所以我在这个过程背后的想法是，我将创建一个forloop来遍历每一行和每一列以查找年份值，如果是2016年则不管它，如果没有，请隐藏它。

但是我在循环部分遇到了问题。

<script>
    function GameSearchLoop() {
        var table = document.getElementsByClassName(table);

        if (table == null) {
            console.log("Table Not Found");
        }
        else {
            console.log("Table Found");
        }

        var rowLength = table.rows.length;
        for (var z = 0; z < rowLength; z++) {
            var cells = table.rows.item(z).cells;
            var cellLength = cells.length;
            console.log("Row Checked");
            for (var x = 0; x < cellLength; x++) {
                console.log("Column Checked");
            }
        }

        //for (var r = 0, n = table.rows.length; r < n; r++) {
        //    console.log("Row Checked");
        //    for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
        //        alert(table.rows[r].cells[c].innerHTML);
        //        console.log("Column Checked");
        //    }
        //}


    }
</script>

我在这里有两个不同的for循环，它们似乎都不起作用。使用附加了类表的相同脚本稍微创建该表。

当运行代码并按下按钮时，我确实在控制台中看到“找到了表”，但之后我在GameSearchLoop上得到了“无法读取未定义的属性'长度”。

由于

Answer 1

getElementsByClassName返回一个NodeList，一个集合。您需要以下第一个元素：

var table = document.getElementsByClassName(table)[0];

假设table在第一个实例中是一个包含类名的变量，并且您的表是第一个或唯一的一个。

或者，

var rowLength = table[0].rows.length;

更好的是，给你的表一个ID并使用getElementById。

Answer 2

我发现它形成了W3schools，我希望这会有所帮助

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<body>

<h2>I picked it from W3schools</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Year</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>2016</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>2017</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>2016</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>2018</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>2019</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>2010</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>2016</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>2013</td>
    <td>France</td>
  </tr>
</table>

<script>
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";
      }
    }       
  }
}
</script>

</body>
</html>

Answer 3

绝对的 var table = document.getElementsByClassName(table); 使用 var table = document.getElementsByClassName('some class in string');

使用Javascript

3 个答案: