0

嗨，我有一个表格记录，如下所示：

<form>
<table>
<tr>
<td>
<input type="text" name="txtTitle" class="txtTitle" value="Title 1" />
<input type="button" name="btnSaveTitle" class="btnSaveTitle" value="Save />
</td>
</tr>
<tr>
<td>
<input type="text" name="txtTitle" class="txtTitle" value="Title 2" />
<input type="button" name="btnSaveTitle" class="btnSaveTitle" value="Save />
</td>
</tr>
.....
</table>
</form>

我喜欢在 ajax POST 中保存特定行的记录。我当前的方法是单击选定的按钮，然后向后遍历以获取 txtTitle 值。例如：

$(".btnSaveTitle").click(function(){
    var selected = $(this);
    var txtTitle = selected.prev().val();
});

但如果我要在 txtTitle 周围添加额外的 html 标签，我将不得不修改我的 javascript 以获得 txtTitle 值。例如，如果我的 html 变成这样：

<tr>
   <td>
   <div class="textboxStyle">
   <input type="text" name="txtTitle" class="txtTitle" value="Title 2" />
   </div>
   <div class="btnStyle">
   <input type="button" name="btnSaveTitle" class="btnSaveTitle" value="Save />
   </div>
   </td>
</tr>

然后我必须将我的 javascript 修改为：

 $(".btnSaveTitle").click(function(){
    var selected = $(this);
    var txtTitle = selected.parent().prev().children("input:first").val();
 });

这很难调试并且容易出错。我该如何克服呢？

4

2 回答 2

1 
var txtTitle = selected.closest("td").find(".txtTitle");

jsfiddle：http: //jsfiddle.net/8JRmk/

于 2013-07-04T13:56:19.417 回答
1

好吧，您知道它们将始终处于相同td（或可能tr）中，因此您可以使用

selected.closest("td").find("[type=text]")

如果这仍然对您没有好处，您可以给按钮并输入相同的属性data-id或其他东西

<input type="text" data-id="1"
<input type="button" data-id="1"

txtTitle = $("[type=text][data-id=" + selected.data('id') + "]");
于 2013-07-04T13:56:54.790 回答