如何让表格内的按钮点击后独立触发添加文本框事件

你当前代码的问题在于，$(".myDiv")会选中页面中所有带有myDiv类的元素，所以点击任意按钮都会给全部myDiv区域同时追加输入框。

修复方案 #

只需要将目标容器的选择逻辑调整为定位当前点击按钮对应的myDiv即可：借助jQuery的$(this)指向当前触发点击事件的按钮元素，再通过DOM遍历匹配对应容器即可。
推荐修改后的代码如下：

$(document).ready(function() {
    $(".mybtn").on("click",function() {
        // 选择当前按钮相邻的下一个.myDiv元素，仅对该容器追加内容
        $(this).next(".myDiv").append("<div><br><input type='text' /><br></div>");
    });
});

如果后续你的DOM结构有调整，按钮和myDiv不再相邻，也可以用更通用的写法，先找按钮的父级单元格再查找内部的myDiv，兼容性更强：

// 替换上面的append行即可
$(this).parent().find(".myDiv").append("<div><br><input type='text' /><br></div>");

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