如何获取表列中多个文本框的值

Question

我被我的项目困住了。在我的jsp页面上，我有一个html table。一列即addresses具有多个textboxes值。最后一列有一个名为edit的链接。

我想要的：点击编辑时我想要用逗号分隔的地址值。

我做了什么（onClick编辑）：

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

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

我想要什么（例子）：newyork，华盛顿。 （如果在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());
})

P.S。 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>