Get values from table of text fields javascript

Question

I have a form which actually is a table of text fields. The html looks like this:

<form>
  <table id="table">
            <tr>
              <th>Player</th>
              <th>Number</th>
              <th>Con.per.day</th>
              <th>P.100.kg</th>
              <th>P.day</th>
              <th>I.month</th>
            </tr>

            <tr>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td>Result</td>
             </tr>


            <tr>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td>Result</td>
            </tr>


            <tr>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
              <td>Result</td>
            </tr>

        </table>
        <input type="button" name="rank" value="Rank" onClick="rankPlayers(this.form)"/>
    </form>

I would like to iterate all fields and get the values at the press of the button, but I get undefined returned in the console log. I don't want to use IDs for each field as I want to do some column operations (add, multiply). My script for the first column looks like this:

            function rankPlayers(){
            var table=document.getElementById("table");
            for(var i=1; i<table.rows.length;i++){

                    console.log(table.rows[i].cells[0].value);
            }
        }

Any tips? Thanks

Why not iterate through the form elements and forget the table entirely? — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented May 24, 2013 at 17:16
Hi, because I need to do some linear operations (by column). Thanks — fekioh
– fekioh, Commented May 24, 2013 at 17:37

user1106925 · Accepted Answer · 2013-05-24 17:13:52Z

12

You need to select the input from the cell:

// ------------------------------------v
console.log(table.rows[i].cells[0].firstChild.value);

If you could have siblings (even whitespace) around the inputs, then you can use the .children collection to target the correct element.

// ------------------------------------v
console.log(table.rows[i].cells[0].children[0].value);

answered May 24, 2013 at 17:13

community wiki

user1106925

Sign up to request clarification or add additional context in comments.

1 Comment

fekioh Over a year ago

Thanks a lot for the quick response!

tymeJV · Accepted Answer · 2013-05-24 17:15:12Z

0

You can change your loop to:

    var table=document.getElementsByTagName("td");
    for(var i=1; i<table.length;i++){
        console.log(table[i].firstChild.value);
    }

This gets all td elements, loops them, and checks the firstChild value

answered May 24, 2013 at 17:15

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Collectives™ on Stack Overflow

Get values from table of text fields javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related