JavaScript，获取没有ID的表的值

Question

这是我的桌子，我想获得“Spielzeit”和“Coins”的价值。

我试过很多类似的

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

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

document.querySelectorAll("#page th");  

但没有任何效果。

我找不到我的桌子，因为没有桌子 ID。

也许你知道如何“找到”我的价值观。

谢谢

<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 1

如果您的页面上只有一个表格，document.querySelector("table").get(0) 应该给您您的表格。

其次，page 是 HTML 中的 id，而不是类。所以应该选择#而不是.

您可以将您的 HTML 更改为：

<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>

现在您可以使用document.querySelector(".item[text='Spielzeit']); 选择相应的项目并获取其下一个元素的文本作为值

所以你的代码应该是：

var elem = document.querySelector(".item[text='Spielzeit']");
var value = elem.parentNode.querySelectorAll('.value').html;