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

Question

I am stuck with my project. On my jsp page, I've a html table . One column ie addresses has multiple textboxes with values. Last column has a link named edit .

What I want: on click of edit I want values of addresses separated by commas.

What I did (onClick edit):

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

What I get : only one value (not other textfield values)

What I want(example) : newyork, washington. (if there were 2 textboxes with newyork and washington as address values in addresses column)

Answer 1

Accoring to http://api.jquery.com/val/ val() returns only the first value. If you want all of them, you need to iterate such as:

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

PS Array.prototype.map could be useful here

Answer 2

To get the values of all the inputs you can use the map function to go over all of the inputs and then the get function to get all the values into an array:

 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" />

Your code should look something like that:

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

And a better example after you added the image of your table:

 $('#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>