Question

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

我如何在jQuery中点击X，它会清空tr里面的输入字段？

Answer 1

用X将单元格更改为：

<td><a href="#" class="click-here">X</a></td>

然后将此内部脚本标记放在页面中：

jQuery(document).ready(function() {
  jQuery('.click-here').click(function() {
    jQuery(this).parents('tr').find('input').val('');
  });
});

<强>更新

基于类名而不是ID制作jQuery，因此它更易于重复使用。

Answer 2

在您当前的html结构中，这应该可以在文档中使用：

$('tr td:first-child').bind('click', function () {
   $(this).parent().find('input').val('');
});

jsfiddle：http://jsfiddle.net/jeffreydev/5S3sv/

Answer 3

  $('td').click( function() {
      var $this = $(this);
      if ($this.text() == 'X')
      {
          $this.siblings().find('input').val('');
      }
    });

编辑：评论后更新。你可以测试它here 编辑2：阅读说明后更新^^

注意：我不知道为什么"$this.siblings('input').val('');"不起作用：/

在jQuery中清空tr中的所有输入字段？

3 个答案: