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....