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....
Does this help you?
$('#out').click(function(){
var data = new Array();
$("table select, table input").each(function(){
data.push($(this).val());
});
alert(data.toString());
})
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++;
});
})
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 ^^
来源:https://stackoverflow.com/questions/5866862/how-to-get-the-data-from-a-row-jquery