javascript - 使用记录行进行 ajax 编程的有效方法

Question

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

<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();
 });

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

Answer 1

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

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