Question

对于学校，我必须过滤HTML表格。该代码中包含一些CSS，而且我不知道为什么无法使用.value-它总是给我undefined。

function filtern() {
  var alles = document.querySelector('.list').value;
  document.getElementById("demo").innerHTML = test;
  document.getElementById("ausgabe").innerHTML = alles;
}

    <table class="mon_list">
      <tr class='list'>
        <th class="list" align="center"><b>Klasse(n)</b></th>
        <th class="list" align="center">Stunde</th>
        <th class="list" align="center">(Lehrer)</th>
        <th class="list" align="center"><b>Vertreter</b></th>
        <th class="list" align="center">Fach</th>
        <th class="list" align="center">Raum</th>
        <th class="list" align="center">Vertretungs-Text</th>
      </tr>
      <tr class='list odd'>
        <td class="list" align="center"><b>5a</b></td>
        <td class="list" align="center">5</td>
        <td class="list" align="center">Se</td>
        <td class="list" align="center"><b>Ma</b></td>
        <td class="list" align="center">BNT-b</td>
        <td class="list" align="center">2.25</td>
        <td class="list" align="center">Vertretung</td>
      </tr>
      <tr class='list even'>
        <td class="list" align="center"><b>5a</b></td>
        <td class="list" align="center">6</td>
        <td class="list" align="center">Se</td>
        <td class="list" align="center"><b>---</b></td>
        <td class="list" align="center">---</td>
        <td class="list" align="center">---</td>
        <td class="list" align="center">frei</td>
      </tr>
      <tr class='list odd'>
        <td class="list" align="center"><b>5c</b></td>
        <td class="list" align="center">1</td>
        <td class="list" align="center">Mü</td>
        <td class="list" align="center"><b>Au</b></td>
        <td class="list" align="center">M</td>
        <td class="list" align="center">1.23</td>
        <td class="list" align="center">Aufgaben</td>
      </tr>
      <tr class='list even'>
        <td class="list" align="center"><b>5c</b></td>
        <td class="list" align="center">2</td>
        <td class="list" align="center">Mü</td>
        <td class="list" align="center"><b>Gi</b></td>
        <td class="list" align="center">M</td>
        <td class="list" align="center">1.23</td>
        <td class="list" align="center">Aufgaben</td>
      </tr>
    </table>
  </p>
  <p id="ausgabe"></p>
</center>

Answer 1

我已经做了一个onclick事件示例，正如@Rory提到的td元素没有value属性。这仅在表单控件上有效。假设您要获取元素的文本，请尝试innerText

function myFunction() {
  var alles = document.querySelector('.list').innerText;
  var alles2 = document.querySelector('.list2').innerText;
  document.getElementById("demo").innerHTML = alles;
  document.getElementById("demo2").innerHTML = alles2;
}

<body>
  <table class="mon_list" onclick="myFunction()">
    <tr class='list'>
      <th align="center"><b>Klasse(n)</b></th>
      <th align="center">Stunde</th>
      <th align="center">(Lehrer)</th>
      <th align="center"><b>Vertreter</b></th>
      <th align="center">Fach</th>
      <th align="center">Raum</th>
      <th align="center">Vertretungs-Text</th>
    </tr>
    <tr class='list2 '>
      <td align="center"><b>5a</b></td>
      <td align="center">5</td>
      <td align="center">Se</td>
      <td align="center"><b>Ma</b></td>
      <td align="center">BNT-b</td>
      <td align="center">2.25</td>
      <td align="center">Vertretung</td>
    </tr>
  </table>

  <p id="demo"></p>
  <p id="demo2"></p>
</body>

如何使用CSS提取HTML表的值？

1 个答案: