How do i extract value of an HTML table with Css?

Question

For school I'm having to filter an HTML Table. The code has some CSS in it and iI have no idea why getting the .value isn't working - it always gives me 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>

td elements don't have a value property. That's only valid on form controls. Assuming you want to get the text of the element, try innerText or textContent — Rory McCrossan
– Rory McCrossan, Commented Jun 18, 2019 at 10:10
Also the .list class is on a lot of elements. You most likely need a loop, or a more specific selector to pull out the text you want to target — Rory McCrossan
– Rory McCrossan, Commented Jun 18, 2019 at 10:12

Sai Manoj · Accepted Answer · 2019-06-18 10:26:29Z

2

I have made a working example onclick event.As @Rory mentioned td elements don't have a value property. That's only valid on form controls. Assuming you want to get the text of the element, try 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>

answered Jun 18, 2019 at 10:26

Sai Manoj

3,8591 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leo Over a year ago

Thank you, but i can't change the HTML document. But i got what i needed. When I'm finished i upload my Solution.

Collectives™ on Stack Overflow

How do i extract value of an HTML table with Css?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related