问通过在表中使用QuerySelector避免for-循环
EN

Stack Overflow用户

提问于 2020-08-04 02:30:46

回答 2查看 147关注 0票数 1

我正试图用querySelectorAll从表中获取每行多条记录的列表，但我尝试了一种方法，但被困在多个for-循环中。

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

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

提取自：var innerT = t2[i].cells;的Html

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

回答 2

Stack Overflow用户

发布于 2020-08-04 02:59:56

您也可以在querySelector上使用html object (类似于querySelectorAll，但只返回第一个匹配元素)。因此，t2[i].querySelector('.c1 a')将在td中返回a，后者在t2[i]中有c1类。然后使用href获取.getAttribute('href');值。

类似地，使用t2[i].querySelector('.pts').innerText;获取div和t2[i]中的类pts。使用innerText从div获取text。

在下面试试。

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>

票数 1

Stack Overflow用户

发布于 2020-08-04 03:00:00

<body onload="init()">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <table class="block_xp-report-table">
        <tbody>
            <tr class="" id="block_xp_report_r0">
                <td class="cell c0" id="block_xp_report_r0_c0">
                    1
                </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"
                        data-attribute="-- need to get the href value from here not the name">John</a>
                </td>
                <td class="cell c2" id="block_xp_report_r0_c2" data-attribute="---need to get this text ">6</td>
                <td class="cell c3" id="block_xp_report_r0_c3">
                    <div class="block_xp-xp">
                        <div class="pts" data-attribute="---need to get this text ">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>


    <script>

        function init() {

            const rowIndexes = {

                href: 1,
                text: 2,
                points: 3
            }

            const responses = Array.from(document.querySelectorAll('.block_xp-report-table tbody tr'))
                .map(res => {



                    const getFor = (elemName) => {
                        return res.querySelectorAll("td")[rowIndexes[elemName]]
                    }


                    return { href: getFor('href').querySelector("a").getAttribute("href"), text: getFor('text').innerText, points: getFor('points').innerText }
                })

            console.log(responses)

          
        }

    </script>
</body>

结果将是(假设表类是块_xp-报表表)

[{"href":"http://test.com.np/user/view.php?id=2157&course=103","text":"6","points":"6,414"},{"href":"http://test.com.np/user/view.php?id=2158&course=103","text":"6","points":"6,414"}]