Javascript: find all "input" in a table

Question

Is there a shorter way to write this in JavaScript?

    var data = [];
    var table = document.getElementById( 'address' );
    var rows = table.getElementsByTagName( 'tr' );
    for ( var x = 0; x < rows.length; x++ ) {
        var td = rows[x].getElementsByTagName( 'td' );
        for ( var y = 0; y < td.length; y++ ) {
            var input = td[y].getElementsByTagName( 'input' );
            for ( var z = 0; z < input.length; z++ ) {
                data.push( input[z].id );
            }
        }
    }

I added the script-tags only because I thought it might be necessary for highlighting. — sid_com
– sid_com, Commented Sep 10, 2011 at 13:38
When posting a question regarding DOM traversal, it's important to post the HTML markup you're using. That way, any confusion is eliminated. — user1385191
– user1385191, Commented Sep 10, 2011 at 18:05

Jon · Accepted Answer · 2011-09-10 12:53:31Z

8

element.getElementsByTagName finds all descendants, not only children, so:

<script type="text/javascript> 

    var data = []; 
    var table = document.getElementById( 'address' ); 
    var input = table.getElementsByTagName( 'input' ); 
    for ( var z = 0; z < input.length; z++ ) { 
        data.push( input[z].id ); 
    } 

</script>

answered Sep 10, 2011 at 12:53

Jon

439k85 gold badges756 silver badges820 bronze badges

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

Comments

nnnnnn · Accepted Answer · 2011-09-10 13:01:54Z

2

Yep.

var data = [],
    inputs = document.getElementById('address').getElementsByTagName('input');

for (var z=0; z < inputs.length; z++)
  data.push(inputs[z].id);

Note, even in your longer version with three loops you can also say:

var rows = table.rows;
// instead of
var rows = table.getElementsByTagName('tr');

// and, noting that it returns <th> cells as well as <td> cells,
// which in many cases doesn't matter:
var tds = rows[x].cells;
// instead of
var tds = rows[x].getElementsByTagName('td');

edited Sep 10, 2011 at 13:01

answered Sep 10, 2011 at 12:55

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

Šime Vidas · Accepted Answer · 2011-09-10 14:51:24Z

1

For modern browsers :)

var table, inputs, arr;

table = document.getElementById( 'test' );
inputs = table.querySelectorAll( 'input' );
arr = [].slice.call( inputs ).map(function ( node ) { return node.id; });

Live demo: http://jsfiddle.net/HHaGg/

So instead of a for loop, I make use of the map method - each array element (each INPUT node) is replaced with its ID value.

Also note that `inputs.map(... doesn't work since inputs is a NodeList element - it's an array-like object, but not an standard array. To still use the map method on it, we just have to transform it into an array which is what [].slice.call( inputs ) does for us.

edited Sep 10, 2011 at 14:51

answered Sep 10, 2011 at 13:48

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

3 Comments

sid_com Over a year ago

Is this faster then the for loop?

sid_com Over a year ago

Which is the last browser (the most modern browser) on which this doesn't work yet?

Šime Vidas Over a year ago

@sid IE8. Array.prototype.map is one of the new ES5 features.

Collectives™ on Stack Overflow

Javascript: find all "input" in a table

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related