使用jquery按钮重置tr输入字段


reset tr input fields with jquery button

我有一个表格,里面有输入字段,供班主任将学生数据保存在表格中,这样校长就可以在表格中检查数据,在这个表格中,每个tr都有更新和重置按钮,这样老师就可以将文本保存在字段中或重置它们,我的html表结构是这个

<script>
var input = $( "input:reset" ).css({
  background: "yellow",
  border: "3px red solid"
});
$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );
 
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tr>
      <td>211</td>
      <td><textarea placeholder="Title" width="500"></textarea></td>
      <td><textarea placeholder="First name"></textarea></td>
      <td><textarea placeholder="Last name"></textarea></td>
      <td><textarea placeholder="speciality"></textarea></td>
      <td><input type="button" class="button" value="update"></td>
      <td><input type="reset" class="button" value="Reset"></td>
	</tr>
 <tr>
      <td>211</td>
      <td><textarea placeholder="Title" width="500"></textarea></td>
      <td><textarea placeholder="First name"></textarea></td>
      <td><textarea placeholder="Last name"></textarea></td>
      <td><textarea placeholder="speciality"></textarea></td>
      <td><input type="button" class="button" value="update"></td>
      <td><input type="reset" class="button" value="Reset"></td>
	</tr>
 <tr>
      <td>211</td>
      <td><textarea placeholder="Title" width="500"></textarea></td>
      <td><textarea placeholder="First name"></textarea></td>
      <td><textarea placeholder="Last name"></textarea></td>
      <td><textarea placeholder="speciality"></textarea></td>
      <td><input type="button" class="button" value="update"></td>
      <td><input type="reset" class="button" value="Reset"></td>
	</tr>
 <tr>
      <td>211</td>
      <td><textarea placeholder="Title" width="500"></textarea></td>
      <td><textarea placeholder="First name"></textarea></td>
      <td><textarea placeholder="Last name"></textarea></td>
      <td><textarea placeholder="speciality"></textarea></td>
      <td><input type="button" class="button" value="update"></td>
      <td><input type="reset" class="button" value="Reset"></td>
	</tr>

这是我的代码,有一次它对我有效,但如果我在tr上重置,它会将所有tr字段从一个重置到最后一个,现在它不起作用,我想为一个tr应用重置功能,意思是每个tr都有重置按钮,我只想如果我点击重置按钮,它只重置自己的tr的输入字段,而不会影响其他tr。

您只需要找到想要清除的textarea元素,并更改它们的值。像这样的东西应该起作用:

$('input[type="reset"]').on('click', function(e) {
  var $tr = $(e.target).closest('tr'),
      $textAreas = $tr.find('textarea');
  $textAreas.val('');
  return false;
});