使用javascript循环表并在td

时间：2016-10-04 05:19:29

标签： javascript html

我有以下HTML表格，我试图循环遍历td's 

<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标记，因此它不会返回我所期望的内容，即文本。相反，它返回我{i}我尝试过使用innerHtml，但这会产生一个错误，即TypeError：无法读取未定义的属性'innerHTML'。

有人可以出示或告诉我如何处理嵌套在html内的labels或span代码，以便我能正确检索这些值。

我只能使用td's。

5 个答案:

答案 0 :(得分：2)

  • 使用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>

答案 1 :(得分：1)

table.rows[i].cells[0]为您提供td本身的参考。要获取标签和范围元素，您可以使用table.rows[i].cells[0].querySelector("label")，并获取实际文字，您可以使用.innerHTML或.innerText。

此外，尽管他们没有受到伤害，但您不需要在作业中围绕右侧表达式使用括​​号。

所以：

var brand =(table.rows[i].cells[0]);

变为：

var brand = table.rows[i].cells[0].querySelector("label").innerText;

等等。

您还需要删除表末尾的空tr元素，否则当您的循环尝试访问其（不存在的）单元格时，您将收到错误。

展开代码段以在上下文中查看：

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

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

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

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

    console.log(string1);
}
＆＃13; 
<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>
  
</tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

或者，您可以跳过tds并使用.querySelector()更直接地获取您想要的位：

var brand = table.rows[i].querySelector('label[for="Name"]').innerText;

在上下文中：

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

for(var i=1; i<table.rows.length;i++){
    var row = table.rows[i];
    var brand = row.querySelector('label[for="Name"]').innerText;
    var baseValue = row.querySelector('label[for="Value"]').innerText;
    var price = row.querySelector('label[for="UnitPrice"]').innerText;
    var total = row.querySelector('label[for="LineTotal"]').innerText;
    var quantity = row.querySelector('span.read-only').innerText;

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

    console.log(string1);
}
＆＃13; 
<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>
  
</tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

（当然，像label[for="Name"]这样的选择器有点难看，所以你可以改为给这些元素一个类，并使用...querySelector(".Name")或其他任何东西 - 取决于你。）

答案 2 :(得分：0)

我已经实现了下面的代码，我得到了正确的值，你可以检查它。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>


<table id="myTable">
  <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>
</table>
<br>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
 {
    var table=document.getElementById('myTable');
    var brand = "";

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

          brand += "<br/>" + (table.rows[i].cells[0].innerHTML);
          brand += "<br/>" + (table.rows[i].cells[1].innerHTML);
          brand += "<br/>" + (table.rows[i].cells[2].innerHTML);
          brand += "<br/>" + (table.rows[i].cells[3].innerHTML);
    }

    document.getElementById("demo").innerHTML = brand;

}
</script>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您也可以在InnerHTml上使用.text（）属性，它会选择除输入标记之外的任何选择器内的值。

brand += "<br/>" + (table.rows[i].cells[0].text);

答案 4 :(得分：0)

您的问题是您正在尝试遍历嵌套的DOM元素（即处理跨度和标记），但接下来您知道在td中有一个段落，并且您再次遇到相同的问题。

更好地用完全不同的方法解决您的问题。我建议将类名改进为你想要跟踪的元素。您已经在“货币”类中走上正轨：

<td class="currency">
  <label class="value" for="Value">10</label>
</td>
...
<td class="currency">
  <span class="value" class="read-only">
     1 
  </span>
</td>

var elements = document.querySelectorAll('.value')
elements.forEach(function(element) {
  console.log(element.textContent)
})
相关问题
最新问题