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 :)

尝试使用此代码：

＆＃13;

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);
}

＆＃13;

<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"/>

＆＃13;

希望这有帮助，

Answer 2

你所拥有的是初学JavaScript的第一步，但是，是的，有很多项需要更新。：）

以下是您需要做的事情：

function checkForm() {
    var rows = document.getElementsByClassName("item-row");
    var arr = new Array();

    for (i = 0; i < rows.length; i++) {
        var cols = rows[i].getElementsByTagName("td");

        for (j = 0; j < cols.length; j++) {
            arr.push(cols[j].textContent);
        }
    }
}

您需要遍历每一行。。。最简单的方法是在for循环中从i = 0转到i < rows.length。
一旦有了行，您需要通过找到所有<td>元素（var cols = rows[i].getElementsByTagName("td");）来收集行中的所有列;
然后，您循环浏览其中的每一个，就像您对行（j = 0到j < cols.length
最后，要获取每个td中包含的文本，请使用textContent属性。。。值（即value属性）仅用于<input>元素

在构建,循环并使用;代替for时，也存在一些语法错误（您使用了val而不是value {1}}，在尝试获取td内容时，但这就是我所看到的。

修改：我还假设您在添加HTML时没有粘贴<table>代码，但是，如果您没有添加<tr>标签必须位于<table。

编辑2：我的解决方案也会跳过查看<td>元素内的标记，因为它们不是标准的（4个包含<textarea>个输入，第5个是{ {1}}）。如果您想进一步了解详细信息，可以在textareas上使用<span>，在.value上使用.textContent。通过使用<span>一级，您忽略了.textContent标记中的所有HTML标记，并仅返回文本。

javascript循环使用类名的表行

2 个答案: