jQuery为动态表格行元素添加name属性时报错：attr不是函数

错误原因 #

你遇到的Uncaught TypeError是因为写法错误：.val().attr()中，不带参数的val()返回的是元素的当前值（字符串类型），而非jQuery对象，所以无法链式调用attr()方法。另外，若要重置输入框值，需要给val()传空字符串参数val("")，这样它才会返回jQuery对象，支持后续链式操作。

修正后的代码 #

$(function() {
  const $tb = $('#service-table tbody');
  $("tr",$tb).eq(0).hide();
  $("#serviceAdd").on("click",function() {
    const $row = $tb.find("tr").eq(0).clone();
    $row.show();
    // 重置select为空并添加name属性
    $row.find("select").val("").attr("name", "service_id[]");
    // 重置数量输入框为空并添加name属性
    $row.find(".s_qty").val("").attr("name", "s_qty[]");
    // 重置总价输入框为空并添加name属性
    $row.find(".s_total").val("").attr("name", "s_total[]");     
    $tb.append($row);
  });
});

补充说明 #

• 如果你不需要重置输入框的值，只是单纯添加name属性，直接调用attr()即可，比如：

  $row.find(".s_qty").attr("name", "s_qty[]");
  

• 克隆行时，原模板行的元素若已有name属性，克隆后会保留，当前的attr()写法会直接替换原有属性值。

内容的提问来源于stack exchange，提问作者Farlar