JavaScript，获取没有ID的表的值

Question

这是我的表，我想获取“Spielzeit”和“Coins”的值。

我尝试过很多类似

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

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

document.querySelectorAll("#page th");  

但是没有任何效果。

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

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

谢谢

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