<tr>
<td>X</td>
<td><input type="text" value="blabla"></td>
<td><input type="text" value="blabla"></td>
<td><input type="text" value="blabla"></td>
<td><inp开发者_JS百科ut type="text" value="blabla"></td>
</tr>
<tr>
<td>X</td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
</tr>
How can i in jQuery, click the X and it will empty the input fields that are inside the tr?
Change the cell with X to this:
<td><a href="#" class="click-here">X</a></td>
Then put this inside script tags in the page:
jQuery(document).ready(function() {
jQuery('.click-here').click(function() {
jQuery(this).parents('tr').find('input').val('');
});
});
UPDATE
Made the jQuery based on class name rather than ID so it's more re-usable.
In your current html structure this should work inside a document ready:
$('tr td:first-child').bind('click', function () {
$(this).parent().find('input').val('');
});
jsfiddle: http://jsfiddle.net/jeffreydev/5S3sv/
$('td').click( function() {
var $this = $(this);
if ($this.text() == 'X')
{
$this.siblings().find('input').val('');
}
});
edit: updated after your comment. you can test it here edit 2: update after reading the description ^^
note: I don't know why "$this.siblings('input').val('');"
doesn't work :/
精彩评论