javascript使用类名遍历表行

Question

这是下表代码，我想将所有 TD 值存储到一个数组中。

<tr class="item-row">
    <td class="item-name"><textarea>Item</textarea></td>
    <td class="description"><textarea>Item</textarea></td>
    <td><textarea class="cost">$0.00</textarea></td>
    <td><textarea class="qty">0</textarea></td>
    <td><span class="price">$0.00</span></td>
</tr>

<tr class="item-row">
    <td class="item-name"><textarea>Item</textarea></td>
    <td class="description"><textarea>Item</textarea></td>
    <td><textarea class="cost">$0.00</textarea></td>
    <td><textarea class="qty">0</textarea></td>
    <td><span class="price">$0.00</span></td>
</tr>

为此，我编写了以下代码:

function checkForm() {
    var table = document.getElementsByClassName("item-row");
    var arr = new Array();
    for (var i = 0, row; row = table.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            arr.push(row.cells[j].val);
        }  
    }
}

但这没有给我任何输出...我是 javascript 的新手，所以可能会遗漏一些重要的东西。

Answer 1

您的代码几乎是正确的，问题是 rows 属性适用于表而不适用于 tr，因此您必须使用表而不是 tr 直接。

另一件事是 getElementsByClassName 返回一个元素数组，因此您必须使用 [index] 来获取您的元素。

最后一件事是，要获取 cell 的值，您不能使用 val，因此请使用 firstChild 获取子节点和 value 获取代码中的值，或者更好，如@pawel 直接建议 cell.textarea :)

试试这段代码:

function checkForm() {
    var table = document.getElementsByClassName("yourTable")[0];
    var arr = new Array();
    for (var i = 0, row; row = table.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            arr.push(row.cells[j].firstChild.value);
        }  
    }
    console.log(arr);
}

<table class="yourTable">
<tr class="item-row">
              <td class="item-name"><textarea>Item</textarea></td>
              <td class="description"><textarea>Item</textarea></td>
              <td><textarea class="cost">$0.00</textarea></td>
              <td><textarea class="qty">0</textarea></td>
              <td><span class="price">$0.00</span></td>
          </tr>

          <tr class="item-row">
              <td class="item-name"><textarea>Item</textarea></td>
              <td class="description"><textarea>Item</textarea></td>
              <td><textarea class="cost">$0.00</textarea></td>
              <td><textarea class="qty">0</textarea></td>
              <td><span class="price">$0.00</span></td>
          </tr>
  </table>
<input type="button" onclick="checkForm();" value="check form"/>

希望对您有所帮助，