javascript - 使用javascript循环表并读取td内的值

Question

我有以下 HTML 表，我正在尝试循环遍历 td

<table id="review-products">
<thead>
    <tr>
        <th>Product</th>
        <th class="currency">Base Value</th>
        <th class="currency">Unit Price</th>
        <th class="currency">Line Total</th>
        <th class="currency">Quantity</th>
    </tr>
</thead>
<tbody>
    <tr id="order-item-510" class="tst-orderItemRow">
            <td>
                <label for="Name">
                    Some Cool Description <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="Value">
                    10 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="UnitPrice">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <label for="LineTotal">
                    $199.00 <!-- Get this -->
                </label>
            </td>
            <td class="currency">
                <span class="read-only">
                    1 <!-- Get this -->
                </span>
            </td>
    </tr>
    <tr></tr>
</tbody>
</table>

并使用以下 JavaScript 检索给定值。

var table=document.getElementById('review-products');

for(var i=1; i<table.rows.length;i++){

    var brand =(table.rows[i].cells[0]);
    var baseValue =(table.rows[i].cells[1]);
    var price =(table.rows[i].cells[2]);
    var total =(table.rows[i].cells[3]);
    var quantity =(table.rows[i].cells[4]);

    var string1 = brand + baseValue + price + total + quantity;

    console.log(brand);
}

不幸的是，由于每个 td 都有一个 label 或 span 标签，它不会返回我期望的内容，即文本。相反，它返回我尝试使用innerHtml的html，但这会产生一个错误，即TypeError:无法读取未定义的属性“innerHTML”。

有人可以告诉我如何处理嵌套在 td's 中的 labels 或 span 标签，以便我可以正确地处理检索值。

我只能使用 javascript 来实现此目的。

Answer 1

• 使用 Node.textContent 获取 text Node 的上下文
• 检查table.rows[i].cells.length在循环中，因为你有空 <tr>元素。

var table = document.getElementById('review-products');

for (var i = 1; i < table.rows.length; i++) {
  if (table.rows[i].cells.length) {
    var brand = (table.rows[i].cells[0].textContent.trim());
    var baseValue = (table.rows[i].cells[1].textContent.trim());
    var price = (table.rows[i].cells[2].textContent.trim());
    var total = (table.rows[i].cells[3].textContent.trim());
    var quantity = (table.rows[i].cells[4].textContent.trim());
    var string1 = brand + baseValue + price + total + quantity;
    console.log(string1);
  }
}

<table id="review-products">
  <thead>
    <tr>
      <th>Product</th>
      <th class="currency">Base Value</th>
      <th class="currency">Unit Price</th>
      <th class="currency">Line Total</th>
      <th class="currency">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr id="order-item-510" class="tst-orderItemRow">
      <td>
        <label for="Name">
          Some Cool Description
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="Value">
          10
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="UnitPrice">
          $199.00
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="LineTotal">
          $199.00
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <span class="read-only">
                    1 <!-- Get this -->
                </span>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>