动态表格整行替换失效排查：为何$("#rowid").replaceWith()不生效？

嘿，我一眼就揪出问题所在啦！

你的核心错误是把变量当成字符串硬写到jQuery选择器里了：
你写的$("#rowid")会让jQuery去查找id为rowid的元素，但你的表格行id都是1、2、3，根本不存在这个元素，所以替换操作完全找不到目标，自然没效果。而$("#2")能生效是因为你直接写了正确的id字符串，精准匹配到了对应的行。

修正后的代码 #

先看修正后的jQuery代码：

$('#data_table').on("click", "tr",function(){ 
  // 这里$(this)就是被点击的tr，直接取id就行，不用closest('tr')
  var rowid = $(this).attr("id");
  var newdata = '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>';
  alert(rowid);
  // 把变量和选择器字符串拼接起来，或者用模板字符串
  $("#" + rowid).replaceWith(newdata); 
  // 也可以用ES6模板字符串：$(`#${rowid}`).replaceWith(newdata);
});

额外小优化 #

1. 你原来代码里的var btnid= $(this).attr("id");其实没用到，可以删掉，避免冗余。
2. $(this).closest('tr')完全没必要，因为绑定的是tr的点击事件，$(this)本身就是当前点击的tr元素，直接取id即可。

验证逻辑 #

修正后，当你点击任意一行的按钮（或者行内区域），代码会正确获取当前行的id，拼接成正确的jQuery选择器，然后用新的行内容替换掉目标行。而且因为用了事件委托$('#data_table').on("click", "tr", ...)，即使替换后的新行也能继续触发点击替换，完美满足你“无需刷新页面重复替换”的需求。

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