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

Question

我有一个带有输入字段的表格，供类主任将他们的学生数据保存在工作表中，这样校长就可以在工作表中检查它，在这个表格中每个 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。

Answer 1

您只需要找到要清除的文本区域元素，然后更改它们的值。这样的事情应该有效:

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

  $textAreas.val('');
  return false;
});