V0lvox337 V0lvox337 - 3 years ago 80
Javascript Question

JavaScript, get value of table without ID

This is my table and I want to get the value of "Spielzeit" and "Coins".

I've tried a lot like

document.querySelector("div.page Spielzeit");

document.getElementById('page').getElementsByTagName('th');

document.querySelectorAll("#page th");


But nothing worked.

I cant find my table, because there is no table id.

Maybe you know how to "find" my values.

Thanks

<div id="page">
<table style="margin-left: 125px; margin-top:50px; width: 300px;">
<tbody>
<tr>
<th style="text-align: left;">Benutzername:</th>
<th style="color: #9e7538; text-align: right;">Dantes999</th>
</tr>
<tr>
<th style="text-align: left;">Reich:</th>
<th style="color: #9e7538; text-align: right;">Not empire</th>
</tr>
<tr>
</tr>
<tr>
<th style="text-align: left;">Charaktere:</th>
<th style="color: #9e7538; text-align: right;">0</th>
</tr>
<tr>
<th style="text-align: left;">Spielzeit:</th>
<th style="color: #9e7538; text-align: right;"> Minuten</th>
</tr>
<tr>
<th style="text-align: left;">Coins:</th>
<th style="color: #9e7538; text-align: right;">0 I-Coins</th>
</tr>
<tr>
<th style="text-align: left;">Coins:</th>
<th style="color: #9e7538; text-align: right;">0 V-Coins</th>
</tr>
<tr>
<th style="text-align: left;">Lagerpasswort:</th>
<th style="color: #9e7538; text-align: right;">000000</th>
</tr>
<tr>
<th style="text-align: left;">Loeschcode:</th>
<th style="color: #9e7538; text-align: right;">1234567</th>
</tr>
</tbody>
</table>
</div>

Answer Source

If there's only one table on your page, document.querySelector("table").get(0) should give you your table.

Second, page is an id in your HTML, not a class. So it should be selected with # not .

You can change your HTML to this:

<div id="page">

<table style="margin-left: 125px; margin-top:50px; width: 300px;">
    <tbody><tr>
        <th class="item" style="text-align: left;">Benutzername:</th> <th class="value" style="color: #9e7538; text-align: right;">Dantes999</th>
    </tr>
    <tr>
        <th class="item" style="text-align: left;">Reich:</th> <th 
class="value" style="color: #9e7538; text-align: right;">Not empire</th>
    </tr><tr>
    </tr><tr>
        <th class="item" style="text-align: left;">Charaktere:</th> 
<th class="value" style="color: #9e7538; text-align: right;">0</th>
    </tr>
    <tr>
        <th class="item" style="text-align: left;">Spielzeit:</th> <th 
  class="value" style="color: #9e7538; text-align: right;"> Minuten</th>
    </tr>
    <tr>
        <th class="item" style="text-align: left;">Coins:</th> <th 
 class="value" style="color: #9e7538; text-align: right;">0 I-Coins</th>
    </tr>
    <tr>
        <th class="item" style="text-align: left;">Coins:</th> <th 
 class="value" style="color: #9e7538; text-align: right;">0 V-Coins</th>
    </tr>

    <tr>
        <th class="item" style="text-align: left;">Lagerpasswort:</th> <th class="value" style="color: #9e7538; text-align: right;">000000</th>
    </tr>
    <tr>
        <th class="item" style="text-align: left;">Loeschcode:</th> <th class="value" style="color: #9e7538; text-align: right;">1234567</th>
    </tr>

    </tbody></table>

Now you can use document.querySelector(".item[text='Spielzeit']); to select the corresponding item and get the text of it's next element for the value

So your code should be:

var elem = document.querySelector(".item[text='Spielzeit']");
var value = elem.parentNode.querySelectorAll('.value').html;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download