无法从表中获取字符串

Question

我的问题是我正在尝试从该div元素内的表中提取所有文本字符串。

我仅想提取几个字符串作为示例。 “ SoreTruchman”。 该字符串可以在<tr data-player-ref="2">下找到。这是我要提取的字符串之一。我要提取的所有字符串都在HTML <tr data-player-ref="SOMENUMBER">下。这些可以有多个。在这些元素下的随机数<tr data-player-ref="somenum">。我只需要那些字符串，这样我就可以直接记录它们。

这是一个HTML示例，其中包含我要提取的字符串。 （表的一部分！）

<tr data-player-ref="2">
        <td>SoreTruchman
            <br>
        </td>

“ data-player-ref”元素下面的所有字符串。一个字符串示例将等于“ SoreTruchman”。

我已经尝试了很多。您可以在下面的脚本中看到我尝试过的一个示例。 这是我的脚本：

var Row = document.getElementById("team_players");
var Table = Row.getElementsByTagName("table");
var Tbody = Table.getElementsByTagName("tbody")[0];
var tr = Tbody.getElementsByTagName("tr")[0];
var td = tr.getElementsByTagName("td");
console.log(td[0].innerText)

这给我一个错误。我不知道为什么。我试图将所有元素都添加到文本路径的根目录，但是没有运气。

有人可以帮助我从此html中提取文本吗？

<div id="team_players">
<h3>Players</h3>
<button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button>
<table>
    <thead>
        <tr>
            <th>Name(s)</th>
            <th>Inventory</th>
            <th>Playtime</th>
            <th>Notes</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr data-player-ref="1">
            <td>Lol
                <br>Lol
                <br>Lol
                <br>Lol
                <br>Lol
                <br>?☘️Ｂ۩ＮＫ☘️?
                <br>☘️Ｂ☘ＮＫ☘️
                <br>
            </td>
            <td></td>
            <td>43:45:44</td>
            <td><u style="color: #0F0">Online</u><u style="color: #0FF">Captain [1]</u>
                <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
            <td>
                <br>
            </td>
        </tr>
        <tr data-player-ref="2">
            <td>SoreTruchman
                <br>
            </td>
            <td></td>
            <td>5:03</td>
            <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
                <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
            <td>
                <button class="btn-small" onclick="teamAct('rank_guest',2);">Make Guest</button>
                <button class="btn-small btn-blue" onclick="teamAct('rank_captain',2);">Make Captain</button>
                <br>
                <button class="btn-small btn-orange" onclick="teamAct('kick',2);">Kick</button>
                <button class="btn-small btn-red" onclick="teamAct('ban',2);">Ban</button>
            </td>
        </tr>
        <tr data-player-ref="3">
            <td>lol
                <br>
            </td>
            <td></td>
            <td>5:00</td>
            <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
                <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u></td>
            <td>
                <button class="btn-small" onclick="teamAct('rank_guest',3);">Make Guest</button>
                <button class="btn-small btn-blue" onclick="teamAct('rank_captain',3);">Make Captain</button>
                <br>
                <button class="btn-small btn-orange" onclick="teamAct('kick',3);">Kick</button>
                <button class="btn-small btn-red" onclick="teamAct('ban',3);">Ban</button>
            </td>
        </tr>
    </tbody>
</table>
</div>

也许带有突变观察者？？？谢谢。

Answer 1

您可以使用.querySelectorAll()直接在表中查找所有玩家行。 然后，您可以在innerHTML或textContent上进行映射。

我更喜欢在这里使用innerHTML，因为这使我们可以拆分
break标记以仅提取名字。 （或根据需要列出完整列表。）

如果使用textContent，则必须拆分空白字符，如果您允许使用空格，则可能会引起麻烦。

ps：如果可能的话，总是喜欢从某个变量中获取数据，而不是为文本抓取HTML标签。 由于teamAct()事件是内联编写的，因此teamAct（）可能是全局的。因此，可能还有一个包含名称的全局变量。

pps：我们可以通过在控制台中调用teamAct('kick', someID )作弊吗？

const player_references = document.querySelectorAll( '#team_players tr[data-player-ref]' );

const players = Array
  .from( player_references )
  .map( row => {
    const id = row.getAttribute( 'data-player-ref' );
    // since there are #text nodes between <tr> and the first <td>
    // we cannot actually use .firstChild, since it's not the <td>
    // so we use querySelector again to avoid also counting the #text nodes.
    const name = row
      .querySelector( 'td:first-child' )
      .innerHTML
      .split( '<br>' )[0]
      .trim();
    return { id, name };
  });
  
console.log( players );

<div id="team_players">
<h3>Players</h3>
<button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button>
<table>
    <thead>
        <tr>
            <th>Name(s)</th>
            <th>Inventory</th>
            <th>Playtime</th>
            <th>Notes</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr data-player-ref="1">
            <td>Lol
                <br>Lol
                <br>Lol
                <br>Lol
                <br>Lol
                <br>?☘️Ｂ۩ＮＫ☘️?
                <br>☘️Ｂ☘ＮＫ☘️
                <br>
            </td>
            <td></td>
            <td>43:45:44</td>
            <td><u style="color: #0F0">Online</u><u style="color: #0FF">Captain [1]</u>
                <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
            <td>
                <br>
            </td>
        </tr>
        <tr data-player-ref="2">
            <td>SoreTruchman
                <br>
            </td>
            <td></td>
            <td>5:03</td>
            <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
                <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
            <td>
                <button class="btn-small" onclick="teamAct('rank_guest',2);">Make Guest</button>
                <button class="btn-small btn-blue" onclick="teamAct('rank_captain',2);">Make Captain</button>
                <br>
                <button class="btn-small btn-orange" onclick="teamAct('kick',2);">Kick</button>
                <button class="btn-small btn-red" onclick="teamAct('ban',2);">Ban</button>
            </td>
        </tr>
        <tr data-player-ref="3">
            <td>lol
                <br>
            </td>
            <td></td>
            <td>5:00</td>
            <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
                <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u></td>
            <td>
                <button class="btn-small" onclick="teamAct('rank_guest',3);">Make Guest</button>
                <button class="btn-small btn-blue" onclick="teamAct('rank_captain',3);">Make Captain</button>
                <br>
                <button class="btn-small btn-orange" onclick="teamAct('kick',3);">Kick</button>
                <button class="btn-small btn-red" onclick="teamAct('ban',3);">Ban</button>
            </td>
        </tr>
    </tbody>
</table>
</div>

Answer 2

将其放在此处。 因此，这使用querySelectorAll来查找所有具有属性tr的{​​{1}}并提取第一个data-player-ref的文本

td

var test = document.querySelectorAll('tr[data-player-ref] > td:first-of-type');
test.forEach(myFunction)

function myFunction(item, index) {
  
  console.log(item.innerText); //The entire name with all html
  console.log(item.innerHTML.split( '<br>' )[0].trim()); //only the first line
  console.log(item.parentElement.getAttribute("data-player-ref")); //the value of the data-player-ref attribute
}

Answer 3

添加例如您要从中获取字符串的class='name'至<td>。然后使用querySelectorAll从表中的每个textContent中检索<td class='name'>。

Answer 4

您正在尝试错误地访问innerHTML。线

Row.getElementsByTagName("table")

返回HTMLCollection而不是HTML元素。因此，您应该得到一个错误：

  

Table.getElementsByTagName不存在

更好的实现方式是为您的tr分配ID。

function teamAct(setterValue, index) {
  var row = document.getElementsByTagName("tr").namedItem(index);
  row.querySelector("td").innerText = setterValue;
}

<div id="team_players">
  <h3>Players</h3>
  <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button>
  <table>
    <thead>
      <tr>
        <th>Name(s)</th>
        <th>Inventory</th>
        <th>Playtime</th>
        <th>Notes</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr id="1">
        <td>Lol
          <br>Lol
          <br>Lol
          <br>Lol
          <br>Lol
          <br>?☘️Ｂ۩ＮＫ☘️?
          <br>☘️Ｂ☘ＮＫ☘️
          <br>
        </td>
        <td></td>
        <td>43:45:44</td>
        <td><u style="color: #0F0">Online</u><u style="color: #0FF">Captain [1]</u>
          <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u>
          <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
        <td>
          <br>
        </td>
      </tr>
      <tr id="2">
        <td>SoreTruchman
          <br>
        </td>
        <td></td>
        <td>5:03</td>
        <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
          <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
          <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
        <td>
          <button class="btn-small" onclick="teamAct('rank_guest',2);">Make Guest</button>
          <button class="btn-small btn-blue" onclick="teamAct('rank_captain',2);">Make Captain</button>
          <br>
          <button class="btn-small btn-orange" onclick="teamAct('kick',2);">Kick</button>
          <button class="btn-small btn-red" onclick="teamAct('ban',2);">Ban</button>
        </td>
      </tr>
      <tr id="3">
        <td>lol
          <br>
        </td>
        <td></td>
        <td>5:00</td>
        <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
          <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
          <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u></td>
        <td>
          <button class="btn-small" onclick="teamAct('rank_guest',3);">Make Guest</button>
          <button class="btn-small btn-blue" onclick="teamAct('rank_captain',3);">Make Captain</button>
          <br>
          <button class="btn-small btn-orange" onclick="teamAct('kick',3);">Kick</button>
          <button class="btn-small btn-red" onclick="teamAct('ban',3);">Ban</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>