时间戳

首页 > 解决方案 > 通过在表内使用 QuerySelector 避免 for 循环

javascript - 通过在表内使用 QuerySelector 避免 for 循环

问题描述

我正在尝试使用querySelectorAll从表中获取每行多条记录的列表，但我已经尝试过一种方式，但卡在了多个 for 循环中。

我想知道 querySelectorAll 函数是否有更合适的方法来解决这个特定问题？

到目前为止我已经尝试过：

到目前为止提取的HTML：var innerT = t2[i].cells;

t2 = document.querySelectorAll('.flexible.block_xp-report-table tbody tr');
for (var i = 0; i < t2.length; i++) {
  var innerT = t2[i].cells; //the generated HTML is from this steps
  for (var j = 0; j < innerT.length; j++) {
    var innerT1 = innerT[j].cells;
    for (var k = 0; k < innerT1.length; k++) {
      console.log(innerT1[k])
    }
  }
}
<table cellspacing="0" class="flexible block_xp-report-table" id="yui_3_17_2_1_1596535723450_172">
  <thead id="yui_3_17_2_1_1596535723450_189">
    <tr id="yui_3_17_2_1_1596535723450_188">
      <th class="header c0" scope="col" id="yui_3_17_2_1_1596535723450_187">
        S.N
      </th>
      <th class="header c1" scope="col" id="yui_3_17_2_1_1596535723450_198">
        Name
      </th>
      <th class="header c2" scope="col">
        Level
      </th>
      <th class="header c3" scope="col">
        Point
      </th>
    </tr>
  </thead>
  <tbody id="yui_3_17_2_1_1596535723450_171">
    <tr class="" id="block_xp_report_r0">
      <td class="cell c0" id="block_xp_report_r0_c0">
        <a href="http://test.com.np/user/view.php?id=2157&amp;course=103">Image 1</a>
      </td>
      <td class="cell c1" id="block_xp_report_r0_c1">
        <a href="http://test.com.np/user/view.php?id=2157&amp;course=103" id="yui_3_17_2_1_1596532113936_188">John</a>
      </td>
      <td class="cell c2" id="block_xp_report_r0_c2">6</td>
      <td class="cell c3" id="block_xp_report_r0_c3">
        <div class="block_xp-xp">
          <div class="pts">6,414</div>
          <div class="sign sign-sup">xp</div>
        </div>
      </td>
    </tr>
    <tr class="" id="block_xp_report_r1">
      <td class="cell c0" id="block_xp_report_r1_c0">
        <a href="http://test.com.np/user/view.php?id=2158&amp;course=103">Image 1</a>
      </td>
      <td class="cell c1" id="block_xp_report_r1_c1">
        <a href="http://test.com.np/user/view.php?id=2158&amp;course=103" id="yui_3_17_2_1_1596532113936_188">John</a> -- -- I the value of href only

      </td>
      <td class="cell c2" id="block_xp_report_r1_c2">6</td> -- I need this number only
      <td class="cell c3" id="block_xp_report_r1_c3">
        <div class="block_xp-xp">
          <div class="pts">6,414</div> -- I need this number only
          <div class="sign sign-sup">xp</div>
        </div>
      </td>
    </tr> --- this tr will go expanding ---
  </tbody>
</table>

标签： javascript

解决方案

您也可以使用querySelector（类似于querySelectorAll但仅返回第一个匹配元素）html object。因此t2[i].querySelector('.c1 a')将返回a里面td有c1类 inside t2[i]。然后href使用.getAttribute('href');.

同样用于t2[i].querySelector('.pts').innerText;get divwith class ptsinside t2[i]。用于从. innerText_textdiv

在下面试试。

var t2 = document.querySelectorAll('.flexible.block_xp-report-table tbody tr');
for (var i = 0; i < t2.length; i++) {
  var href = t2[i].querySelector('.c1 a').getAttribute('href');
  console.log(href);
  var pts = t2[i].querySelector('.pts').innerText;
  console.log(pts);
}
<table cellspacing="0" class="flexible block_xp-report-table" id="yui_3_17_2_1_1596535723450_172">
  <thead id="yui_3_17_2_1_1596535723450_189">
    <tr id="yui_3_17_2_1_1596535723450_188">
      <th class="header c0" scope="col" id="yui_3_17_2_1_1596535723450_187">
        S.N
      </th>
      <th class="header c1" scope="col" id="yui_3_17_2_1_1596535723450_198">
        Name
      </th>
      <th class="header c2" scope="col">
        Level
      </th>
      <th class="header c3" scope="col">
        Point
      </th>
    </tr>
  </thead>
  <tbody id="yui_3_17_2_1_1596535723450_171">
    <tr class="" id="block_xp_report_r0">
      <td class="cell c0" id="block_xp_report_r0_c0">
        <a href="http://test.com.np/user/view.php?id=2157&amp;course=103">Image 1</a>
      </td>
      <td class="cell c1" id="block_xp_report_r0_c1">
        <a href="http://test.com.np/user/view.php?id=2157&amp;course=103" id="yui_3_17_2_1_1596532113936_188">John</a>
      </td>
      <td class="cell c2" id="block_xp_report_r0_c2">6</td>
      <td class="cell c3" id="block_xp_report_r0_c3">
        <div class="block_xp-xp">
          <div class="pts">6,414</div>
        </div>
      </td>
    </tr>
    <tr class="" id="block_xp_report_r1">
      <td class="cell c0" id="block_xp_report_r1_c0">
        <a href="http://test.com.np/user/view.php?id=2158&amp;course=103">Image 1</a>
      </td>
      <td class="cell c1" id="block_xp_report_r1_c1">
        <a href="http://test.com.np/user/view.php?id=2158&amp;course=103" id="yui_3_17_2_1_1596532113936_188">John</a>
      </td>
      <td class="cell c2" id="block_xp_report_r1_c2">6</td>
      <td class="cell c3" id="block_xp_report_r1_c3">
        <div class="block_xp-xp">
          <div class="pts">6,414</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

推荐阅读