How to get the data from a row jQuery

Question

I have this problem about retrieving row data in jQuery. this is not really a simple problem for me since my table cells contains a select tag, and a input box. To be clear enough, here's my html code of my table:

    <tr>
        <td>
          <select style="width:5em;" class="field">
            <option></option>
            <option>name</option>
            <option>age</option>
            <option>sex</option>
          </select>
        </td> 
        <td>
          <select style="width:5em;" class = "comp">
            <option></option>
            <option>equals</option>
            <option>starts with</option>
            <option>not equal to</option>
          </select>
        </td>
        <td><input type="text" class = 'value'></td>
    </tr>
    <tr>
        <td>
          <select style="width:5em;" class="field">
            <option></option>
            <option>name</option>
            <option>age</option>
            <option>sex</option>
          </select>
        </td>
        <td>
          <select style="width:5em;" class = "comp">
            <option></option>
            <option>equals</option>
            <option>starts with</option>
            <option>not equal to</option>
          </select>
        </td>
        <td><input type="text" class = 'value'></td>
    </tr>  
    <tr>
        <td>
          <select style="width:5em;" class="field">
            <option></option>
            <option>name</option>
            <option>age</option>
            <option>sex</option>
          </select>
        </td>
        <td>
          <select style="width:5em;" class = "comp">
            <option></option>
            <option>equals</option>
            <option>starts with</option>
            <option>not equal to</option>
          </select>
        </td>
        <td><input type="text" class = 'value'></td>
    </tr>              
</table>
<input type="button" value = "go" id="out">

Here's my Javascript code:

$('#out').click(function(){    
    var tr = 1;
    $('table tr').each(function(){
        var td = 1;
        $(this).find('td').each(function(){
            alert(JSON.stringify($(this).text()));
            td++;
        });
        tr++;
    });
})

What I am trying to do is that i want to get all the row data in the table, but everytime I click the button, it won't display the correct output. I also tried this:

$(this).children($(".field option:selected").text())

to get the value of selected option, but it still no good.

DEMO here. Please help....

.text just gets the textual content of the cell, not the content of the fields — mplungjan, May 03 '11 at 08:20
do you need get the filter data row after row nice if u need it in JS i can help you :) — Marwan, May 03 '11 at 08:26
@Marwan, yes I need to get the filter.. and thank you for replying — jayAnn, May 03 '11 at 08:38

score 4 · Accepted Answer · answered May 03 '11 at 08:32

4

Does this help you?

http://jsfiddle.net/KzXjb/3/

$('#out').click(function(){   

    var data = new Array();

    $("table select, table input").each(function(){
       data.push($(this).val());
    });

    alert(data.toString());

})

answered May 03 '11 at 08:32

Graham

14,885
4
36
42

thank you for the answer sir. It also gives me some good option on how to do my program. thanks a lot. :) – jayAnn May 04 '11 at 03:09

score 2 · Answer 2 · answered May 03 '11 at 08:26

2

Here is what I think you meant

http://jsfiddle.net/mplungjan/8xFFH/12/

$('#out').click(function(){    
        var tr = 1;
        $('table tr').each(function(){
            var td = 1;
            $(this).find('td').each(function(){
                var fld = $(this).find('select, input');
                alert(fld.val());
                td++;
            });
            tr++;
        });
    })

answered May 03 '11 at 08:26

mplungjan

169,008
28
173
236

Hey, thank you for the answer. One more question. I'd like to add some conditions like, if the first data is name, i want to alert something else (not the word "name"). How will I do that? Thank you. – jayAnn May 04 '11 at 03:07

score 1 · Answer 3 · answered May 03 '11 at 08:36

1

You can try something like this :

$('#out').click(function(){    
    $('table tr').each(function(){
        var td = '';
        $(this).find('option:selected').each(function(){
           td = td + ' ' + $(this).text();
        });
        td = td + ' ' + $(this).find('input').val();
        alert(td);
    });
})

If i correctly understand what you need ^^

answered May 03 '11 at 08:36

Awea

3,163
8
40
59

yes... that is just what i need. Thank you so much.... my program is perfectly running now.. – jayAnn May 03 '11 at 08:41
Is that not the same as the `$(this).find('select, input').val();` I posted? – mplungjan May 03 '11 at 08:53
yes, It's not the same. You're answer also is great. all the answers below is running perfect. Thank you all – jayAnn May 04 '11 at 02:58

How to get the data from a row jQuery

3 Answers3

Linked