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)
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.