Question

从以下代码（简化代码）：

<table>
  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME1</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP1</a>
    </td>
    <td class="score">1000</td>
  </tr>

  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME2</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP2</a>
    </td>
    <td class="score">4300</td>
  </tr>

  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME3</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP1</a>
    </td>
    <td class="score">3000</td>
  </tr>
</table>

我想为GROUP1上的每个人提取以下信息：

NAME1 Score:1000
NAME3 Score:3000

如果可能的话，将其写入.txt。如果在javascript上无法写入txt，console.log也可以。

Answer 1

您需要构建一个包含每个组的对象。然后你需要过滤它。你可以这样做：

var trs = document.querySelectorAll("tr");
var myObj = {};
for (var i = 0; i < trs.length; i++) {
  // Get the group.
  group = trs[i].querySelector(".groupLink").innerHTML.trim();
  myObj[group] = myObj[group] || [];
  myObj[group].push({
    "name": trs[i].querySelector(".name a").innerHTML.trim(),
    "score": trs[i].querySelector(".score").innerHTML.trim()
  });
}
console.log(myObj["GROUP1"]);

<table>
  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME1</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP1</a>
    </td>
    <td class="score">1000</td>
  </tr>

  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME2</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP2</a>
    </td>
    <td class="score">4300</td>
  </tr>

  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME3</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP1</a>
    </td>
    <td class="score">3000</td>
  </tr>
</table>

我在这里得到输出：

[
  {
    "name": "NAME1",
    "score": "1000"
  },
  {
    "name": "NAME3",
    "score": "3000"
  }
]

您可以使用简单的循环来格式化输出：

var trs = document.querySelectorAll("tr");
var myObj = {};
for (var i = 0; i < trs.length; i++) {
  // Get the group.
  group = trs[i].querySelector(".groupLink").innerHTML.trim();
  myObj[group] = myObj[group] || [];
  myObj[group].push({
    "name": trs[i].querySelector(".name a").innerHTML.trim(),
    "score": trs[i].querySelector(".score").innerHTML.trim()
  });
}
for (var j = 0; j < myObj["GROUP1"].length; j++)
  console.log(myObj["GROUP1"][j].name + " Score: " + myObj["GROUP1"][j].score);

<table>
  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME1</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP1</a>
    </td>
    <td class="score">1000</td>
  </tr>

  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME2</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP2</a>
    </td>
    <td class="score">4300</td>
  </tr>

  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME3</a>
    </td>
    <td class="group">
      <a class="groupLink" onclick="" href="">GROUP1</a>
    </td>
    <td class="score">3000</td>
  </tr>
</table>

<强>输出

NAME1 Score: 1000
NAME3 Score: 3000

Answer 2

基本上，只需迭代单元格并提取相关信息即可。

你可以这样做：

const rows = document.querySelectorAll('tr');
rows.forEach(function(el){
  const name = el.querySelector(".name a").innerHTML.trim();
  const score = el.querySelector(".score").innerHTML.trim();
  console.log(`${name} Score:${score}`);
});

<table>
  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME1</a>
    </td>
    <td class="group">
      <a class="groupLink" href="" onclick="">GROUP1</a>
    </td>
    <td class="score">1000</td>
  </tr>
  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME2</a>
    </td>
    <td class="group">
      <a class="groupLink" href="" onclick="">GROUP2</a>
    </td>
    <td class="score">4300</td>
  </tr>
  <tr class="alt">
    <td class="name">
      <a href="" onclick="">NAME3</a>
    </td>
    <td class="group">
      <a class="groupLink" href="" onclick="">GROUP1</a>
    </td>
    <td class="score">3000</td>
  </tr>
</table>

Answer 3

我想为GROUP1
上的每个人提取以下信息

使用带Array.prototype.forEach()函数的单循环的简短解决方案：

var result = [];
Array.prototype.slice.call(document.querySelectorAll('tr.alt')).forEach(function(el){
    var childs = el.children;
    if (childs[1].children[0].innerHTML === 'GROUP1') {
        this.push({Name: childs[0].children[0].innerHTML.trim(), Score: childs[2].innerHTML.trim()})
    }
}, result);

console.log(result);

<table><tr class="alt">
    <td class="name">
         <a href="" onclick="">NAME1</a>
    </td>
    <td class="group">
         <a class="groupLink" onclick="" href="">GROUP1</a>
    </td>
    <td class="score">1000</td>
</tr>

<tr class="alt">
    <td class="name">
        <a href="" onclick="">NAME2</a>
    </td>
    <td class="group">
        <a class="groupLink" onclick="" href="">GROUP2</a>
    </td>
    <td class="score">4300</td>
</tr>

<tr class="alt">
    <td class="name">
        <a href="" onclick="">NAME3</a>
    </td>
    <td class="group">
         <a class="groupLink" onclick="" href="">GROUP1</a>
    </td>
    <td class="score">3000</td>
    </tr>
</table>

使用Javascript从HTML中过滤和提取

3 个答案: