I have a dynamic html table generated using javascript. the table contains diffrent controls like textbox,dropdown box which has custom attributes.How can I loop through all the controls present inside this table and find the control whose custom attribute matches to some value?

I have a dynamic html table generated using javascript. the table contains diffrent controls like textbox,dropdown box which has custom attributes.How can I loop through all the controls present inside this table and find the control whose custom attribute matches to some value?

• javascript
• jquery
• forms
• jquery-selectors
• dom-traversal

• 1 Would be easier to see your markup, or at least a part of it... – Didier Ghys Commented Feb 24, 2012 at 9:05

4 Answers 4

This will give you all the form elements inside your table (:input selector):

var $formElements = $('#tableid').find(':input');

You can filter with an attribute selector:

//will select every form element having a data-custom attribute set to 5
var $formElements = $('#tableid').find(':input[data-custom="5"]');

Please see the jsFiddle Demo. For my examples I used HTML5 data- attributes, but the code will work with any attribute you need.

OR you can use the filter() method to write a function that filters your elements:

var $formElements = $('#tableid').find(':input').filter(function () {
    return $(this).attr('data-custom') == '5';
});

jsFiddle Demo with filter()

Demo : http://jsfiddle/DSqZr/1/

function getControl(_value){
    $("#panel :input").each(function(){
        if($(this).attr("custom") == _value){
           return  $(this);
        }
    })​
}

var selectedCrl = getControl(1);

You can use Attribute Contains Selector.

Check the example it is probably very close to what you need which is finding input & select elements with certain attribute values

Give them a class .control and:

$('.control[attribute=value]')

Check Selectors API for more on attribute selectors.