arrays - javascript to loop through table rows with a classname - Stack Overflow

admin管理员组

文章数量:1402837

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

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

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

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

• javascript
• arrays

Share Improve this question Follow edited Jan 29, 2015 at 22:31 Lachlan Goodhew-Cook 1,10111 gold badge1717 silver badges3131 bronze badges asked Jan 29, 2015 at 22:11 user3305327user3305327 91744 gold badges2020 silver badges3636 bronze badges 5

• Have you done any debugging? Try checking the values before you add them and you should be able to narrow it down. Is table being defined properly? Does row.cells[j].val have a value. – Lachlan Goodhew-Cook Commented Jan 29, 2015 at 22:32
• Notice that table is not a table, but a <tr>. – JCOC611 Commented Jan 29, 2015 at 22:38
• @JCOC611 yes...so for <tr> how should I use the loop? – user3305327 Commented Jan 29, 2015 at 22:40
• @LachlanGoodhew-Cook I just want to loop through the <tr> with classname "item-row"...may be on this point am missing something – user3305327 Commented Jan 29, 2015 at 22:41
• I know what you want to do I'm just trying to give you some advice to help YOU figure out what's wrong. – Lachlan Goodhew-Cook Commented Jan 29, 2015 at 22:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Your code is almost right, the thing is that rows property work for tables not for trs so you have to take a table instead of the tr directly.

The other thing is that getElementsByClassName returns an array of your elements so you have to use [index] to get your element.

The last thing is that to get the value for the cell you can't use val, so use firstChild to get the child and value to get the value as in the code, or better as @pawel suggest directly cell.textarea :)

Try with this code:

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

Hope this helps,

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

Here is what you would need to do what you are trying to do:

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. You need to cycle through each row . . . the easiest way to do this by going from i = 0 to i < rows.length in your for loop.

2. 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"););

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

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

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.

Edit: 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.

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.

本文标签： arraysjavascript to loop through table rows with a classnameStack Overflow