javascript to loop through table rows with a classname

Question

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.

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, Jan 29 '15 at 22:32
@LachlanGoodhew-Cook I just want to loop through the with classname "item-row"...may be on this point am missing something — user3305327, Jan 29 '15 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, Jan 29 '15 at 22:43

albciff · Answer 1 · 2015-01-29T22:47:58.217

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,

Or `row.cells[j].textContent` to get both textarea values and text in spans. — pawel, Jan 29 '15 at 22:45

talemyn · Accepted Answer · 2015-01-30T14:26:36.430

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

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.
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"););
Then, you loop through each of those, just like you did with the rows (j = 0 to j < cols.length
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.

@talemyn...I have used your code with a alert but it shows up nothing...the code is 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); alert(cols[j].textContent); } } } — user3305327, Jan 29 '15 at 22:50
Are you returning anything? If you want to see it in an alert, then you would need to add `return arr;` right before the last `}` and then you could run `alert(checkForm());` and the result would show. Alternately, you could add `alert(arr);` at that same point in the code and it would show then. — talemyn, Jan 29 '15 at 22:58

javascript to loop through table rows with a classname

2 Answers2

Linked