如何獲取表格列中多個文本框的值

Question

我堅持我的項目。 在我的jsp頁面上，我有一個html table 。 一列即addresses有多個帶有值的textboxes 。 最后一列有一個名為edit的鏈接。

我想要什么：點擊編輯我想要用逗號分隔的地址值。

我做了什么（點擊編輯）：

var values = $(this).closest('tr').find('[type=text]').val();

我得到的是：只有一個值（不是其他文本字段值）

我想要什么（示例）：紐約，華盛頓。 （如果addresses欄中有 2 個文本框，其中 newyork 和 Washington 作為地址值）

Answer 1

根據http://api.jquery.com/val/ val() 僅返回第一個值。 如果您想要所有這些，則需要進行迭代，例如：

var s = []; 
$(this).closest('tr').find('[type=text]').each(function(v) { 
    s.push(v.val());
})

PS Array.prototype.map 在這里很有用

Answer 2

要獲取所有輸入的值，您可以使用map函數遍歷所有輸入，然后使用get函數將所有值放入數組中：

 var values = $('[type=text]').map(function() { return $(this).val(); }).get(); console.log(values);

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="a" value="a - val" /> <input type="text" name="b" value="b - val" />

你的代碼應該是這樣的：

var values = $(this).closest('tr').find('[type=text]').map(function() {
    return $(this).val();
}).get();

添加表格圖像后的更好示例：

 $('#a1').click(function() { var values = $(this).closest('tr').find('[type=text]').map(function() { return $(this).val(); }).get(); alert(values); });

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <input type="text" name="a" value="a - val" /> <input type="text" name="b" value="b - val" /> </td><td> <div id="a1">edit</div> </td> </tr> </table>