javascript循环使用类名的表行 [英] javascript to loop through table rows with a classname

问题描述

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

Here is the following table code and I want to store all TD values into an Array.

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

为此，我写了以下代码：

For this I have written this following code:

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的新手，所以可能会错过很多时间。

But this gives me no output...I am new to javascript so may be am missing something in big time.

推荐答案

你所拥有的是一个好的第一努力成为JavaScript的新手，但是，是的，有很多项需要更新。 ：）

What you have is a good first effort for being new to JavaScript, but, yes, there are quite a few items that need updating. :)

以下是您要做的事情：

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

1. 您需要遍历每一行。 。 。最简单的方法是从 i = 0 到 i<你的for循环中的rows.length 。

一旦你有一行，你需要收集行中的所有列，找到所有< td> 元素（ var cols = rows [i] .getElementsByTagName（td）; ）;

Once you have a row, you need to gather all of the columns in the row, by finding all of the <td> elements (var cols = rows[i].getElementsByTagName("td"););

然后，你循环遍历每一行，就像你对行所做的那样（ j = 0 到 j< cols.length

Then, you loop through each of those, just like you did with the rows (j = 0 to j < cols.length

最后，获取文字包含在每个 td 中，您使用 textContent 属性...值（即值 property）仅用于< input> 元素

Finally, to get the text contained in each td, you use the textContent property . . . values (i.e., the value property) are used only for <input> elements

那里也有一些语法错误（你使用，代替; ，在为循环构建时，使用 val 而不是 value ，当试图获得 td 内容时，但这就是我所看到的。

There were a couple of syntax errors in there, too (you used , instead of ;, when building your for loop and you used val instead of value, when attempting to get the td content), but that was all that I saw.

编辑：我也是假设您在添加HTML时没有粘贴< table> 标记，但是，如果您没有粘贴< tr> ; 标签必须位于< table 内。

I'm also assuming that you just did not paste your <table> tags in when you added your HTML, but, if you didn't your <tr> tags must be inside a <table.

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

Edit 2: My solution also skips the looking at the tags inside the <td> elements, since they are not standard (4 contain <textarea> inputs and the 5th a <span>). If you want to go down one more level of detail, you could use .value on the textareas and (again) .textContent on the <span>. By using .textContent one level up, you are ignoring all HTML tags insid the <td> tags and returning only the text.

这篇关于javascript循环使用类名的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！