Question

jquery 点击按钮获取动态添加的 tr中 input text 内容

<table class="tableSt1 text-left" >
<tr>
<th width="40">排序</th>
<th>项目名称</th>
<th width="50">操作</th>
<th width="50">修改</th>
</tr>
<c:forEach items="${projectHot26005s}" var="zslb">
<tr id="sj1">
<td><input type="text" id="txt" value="" maxlength="2" id="txt"></td>
<td>${zslb.projectName }</td>
<td><button class="btn btn-red r3 margin" onclick="btnDelete('${zslb.projectId }')">删除</button></td>
<td><button class="btn btn-red r3 margin" onclick="change()">修改</button></td>
</tr>
</c:forEach>
</table>
这是页面
function change(txt){
var text ="";
var len = $("input[type=text]").length;
$("#sj input[type=text]").each(function(){
text = $(this).val();
});
console.log(text);
}
这是js
现在的效果是不论点哪一行的修改按钮 都只能获取最后一行的内容

我想分别点击某一行的修改按钮 就获得哪一行的input text value

这是页面效果
jquery 代码应该是
function change(txt){
var text ="";
var len = $("input[type=text]").length;
$("input[type=text]").each(function(){
text = $(this).val();
});
console.log(text);
}

Answer 1

按照要求，在点击每一行的修改按钮，需要获取对应行的第一列input的value值，对应的js代码参考下方：

function change(){
   var text = $(this).parents('tr').children('td:eq(0)').children('input').val();
   console.log(text);
}

还有更加简便的方法：在forEach循环生成tr和td元素时，按照如下规则生成td元素：

<c:forEach items="${projectHot26005s}" var="zslb">
<tr id="sj1">
<td><input type="text" id="txt${zslb.projectId}" value="" maxlength="2"></td>
<td>${zslb.projectName }</td>
<td><button class="btn btn-red r3 margin" onclick="btnDelete('${zslb.projectId }')">删除</button></td>
<td><button class="btn btn-red r3 margin" onclick="change('${zslb.projectId}')">修改</button></td>
</tr>
</c:forEach>

这样在change方法中就能通过唯一的id来定位到指定的input，既而获取到value值：

function change(id){
   var text = $("#txt" + id).val();
   console.log(text);
}