Как получить значение нескольких текстовых полей в столбце таблицы

Question

Я застрял в своем проекте. На моей странице jsp у меня есть html table. Одна колонка, то есть addresses, имеет несколько значений textboxes со значениями. Последняя колонка имеет ссылку с именем edit.

Что я хочу: по щелчку редактирования Я хочу, чтобы значения адресов разделялись запятыми.

То, что я сделал (OnClick редактировать):

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

Что я получаю: только одно значение (не другие значения TextField)

То, что я хочу (пример): NewYork, штат Вашингтон. (Если было 2 Textboxes с NewYork и Вашингтоном в качестве значений адреса в столбце addresses)

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>