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/

Answer 2

嗯，你知道他们将永远在同一个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') + "]");

用记录行编写ajax的有效方法

2 个答案: