Передача значения из JQuery Modal в последнее поле ввода

Question

Я создал модальное окно, содержащий таблицу с рядами полого ввода и кнопками:

<table class="datatable tablesort selectable paginate full" width="100%"> 

         <tbody> 
                 <tr id="row_1"> 
          <td><strong><input type="text" value="120040965" id="icpcode"> 
    <button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong> 
           <p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p> 
           </td> 
          </tr>        <tr id="row_2"> 
          <td><strong><input type="text" value="120040966" id="icpcode"> 
    <button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong> 
           <p>CHRYSLER GRAND VOYAGER WIPER MOTOR FRONT 01-08 £30.00</p> 
           </td> 
          </tr>        <tr id="row_3"> 
          <td><strong><input type="text" value="120040964" id="icpcode"> 
    <button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong> 
           <p>CHRYSLER GRAND VOYAGER MK2 01-08 2.8 CRD GEARBOX AUTOMATIC £500.00</p> 
           </td> 
          </tr>        <tr id="row_4"> 
          <td><strong><input type="text" value="120040963" id="icpcode"> 
    <button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong> 
           <p>CHRYSLER GRAND VOYAGER MK2 STOW £80.00</p> 
           </td> 
          </tr>        <tr id="row_5"> 
          <td><strong><input type="text" value="120040962" id="icpcode"> 
    <button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong> 
           <p>CHRYSLER GRAND VOYAGER MK2 01-08 WISHBONE DRIVER SIDE £15.00</p> 
           </td> 
          </tr>       </tbody> 
      </table> 

Затем я использую JQuery, чтобы вставить значение InputBox (icpcode) в последней строке другой таблицы и закрыть открытые модальные и сосредоточиться на том InputBox:

$('#btnSave').click(function() { 
var value = $('#icpcode').val(); 

$('#tablemain tbody tr:last #itemlookup').val(value); 
$('#tablemain tbody tr:last #itemlookup').focus(); 
$('#productlookup').modal('hide'); 
}); 

Моя проблема в том, что только первая кнопка работает, так что мне нужно решение, которое позволяет значение выбранной строки, чтобы передать назад. Я увеличил идентификатор tr, но я не уверен, что мне нужно сделать ... но я предполагаю, что ему нужно что-то, связанное с $. (This), а также увеличивая входную кнопку/кнопку. Может быть, проще покончить с кнопкой и иметь строку, чтобы иметь onclick? В любом случае я ценю любую помощь!

Answer 1

Что вы можете сделать идентификатор дать им все уникальные идентификаторы, а затем дать им все тот же класс:

<button type="button" id="row 1" class="btnSave btn btn-primary">Insert</button> 
<button type="button" id="row 2" class="btnSave btn btn-primary">Insert</button> 
<button type="button" id="row 3" class="btnSave btn btn-primary">Insert</button> 

Затем использовать класс в качестве ссылки и идентификатор для значения;

$('.btnSave').click(function() { 
    var value = this.id; // this equals 'row 1' | 'row 2' | 'row 3' 

    // your remaining code here 
}); 

и получить значение текстового редактирования выбранной строки, вы можете ссылаться на него, используя идентификатор баттона, чтобы захватить значение, как показано ниже, а также ablt для создания строк таблицы, используя цикл легко и быстро ,

<table class="datatable tablesort selectable paginate full" width="100%"> 
     <tbody> 
      <tr> 
       <td> 
        <strong> 
         <input type="text" value="120040965" id="data_1"> 
         <button type="button" id="1" class="btnSave btn btn-primary">Insert</button> 
        </strong> 

        <p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <strong> 
         <input type="text" value="120040965" id="data_2"> 
         <button type="button" id="2" class="btnSave btn btn-primary">Insert</button> 
        </strong> 

        <p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <strong> 
         <input type="text" value="120040965" id="data_3"> 
         <button type="button" id="3" class="btnSave btn btn-primary">Insert</button> 
        </strong> 

        <p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

    <script> 
     $('.btnSave').click(function() { 
      var row = this.id; 
      var value = $('#data_' + row).val(); 

      alert(value); 
     }); 
    </script> 

Answer 2

Это потому, что ваши поля ввода имеют общий идентификатор, а все ваши кнопки имеют одинаковый идентификатор. Каждый элемент вашей страницы должен иметь уникальный идентификатор.

<input type="text" id="input1"> 
<input type="text" id="input2"> 
<input type="text" id="input3"> 

Это причина, только первая кнопка работает, потому что это только найти один элемент с этим идентификатором, и это первая кнопка, остальные игнорируются.

Таким образом, чтобы решить эту проблему, вы можете добавить btnSave как класс для кнопок, как это:

<button type="button" class="btn btn-primary btnSave"> 

и изменить JS для:

$('.btnSave').click(function() { 
    // do something 
}); 

Или вы могли бы изменить ваш ID очень немного, как это:

<button type="button" id="btnSave1" class="btn btn-primary"> 
<button type="button" id="btnSave2" class="btn btn-primary"> 
<button type="button" id="btnSave3" class="btn btn-primary"> 

и ваш JS будет:

$('button[id^="btnSave"]').click(function() { 
    // do something 
});