修改textarea内容后无法重置或清空的jQuery问题求助

核心问题分析 #

1. textarea内容操作错误：使用text()方法设置textarea内容，但textarea是表单控件，其输入值由value属性控制，text()仅修改元素的innerHTML，用户手动输入后，浏览器会优先读取value属性的值，导致后续text()操作无法生效。
2. DataTables动态行事件绑定失效：DataTables初始化后会重新渲染表格行，直接绑定tr的click事件仅对初始行生效，新生成的行无法触发事件。
3. 按钮属性错误：按钮不存在readonly属性，应该用disabled来实现禁用效果。

修改后的代码 #

JavaScript部分 #

$(document).ready(function() {
  // 初始化DataTables
  $('#hastaliklar').DataTable();

  // 事件委托绑定表格行点击，兼容动态生成的行
  $("#hastaliklar").on('click', 'tbody tr', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
    // 用text()获取单元格纯文本，避免带入HTML标签
    var ad = $(this).find('td:eq(1)').text();
    var tanim = $(this).find('td:eq(2)').text();
    var belirti = $(this).find('td:eq(3)').text();
    var yap = $(this).find('td:eq(4)').text();
    var yapma = $(this).find('td:eq(5)').text();
    
    // 用val()操作textarea的value属性
    $("#adtxt").val(ad);
    $("#tanimtxt").val(tanim);
    $("#belirtitxt").val(belirti);
    $("#yaptxt").val(yap);
    $("#yapmatxt").val(yapma);

    $("#kaydetbtn").addClass("unvisible").prop('disabled', true);
    $("#guncellebtn").removeClass("unvisible").prop('disabled', false);
  });

  $("#temizle").click(function() {
    // 用val()清空textarea
    $("#adtxt").val("");
    $("#tanimtxt").val("");
    $("#belirtitxt").val("");
    $("#yaptxt").val("");
    $("#yapmatxt").val("");

    $("#guncellebtn").addClass("unvisible").prop('disabled', true);
    $("#kaydetbtn").removeClass("unvisible").prop('disabled', false);
  });
});

关键修改点说明 #

• 所有操作textarea的text()替换为val()，这是表单控件值操作的标准方法。
• 表格行点击事件改用on()事件委托，绑定到表格容器上，确保动态生成的行也能触发事件。
• 获取表格单元格内容时用text()而非html()，避免将HTML标签带入textarea。
• 按钮禁用逻辑改用disabled属性，替换无效的readonly属性。

额外优化建议 #

表格的style="overflow: auto; height: 400px; display: block;"易导致表头与表体错位，建议改用DataTables自带的滚动配置：

$('#hastaliklar').DataTable({
  scrollY: '400px',
  scrollCollapse: true,
  paging: false
});

此配置可自动保持表头与表体的对齐。

内容的提问来源于stack exchange，提问作者Ismail Yanık