從jQuery的模態傳遞值成

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插入輸入框的值（ icpcode）到另一個表的最後一行，並關閉打開的模式，並側重於輸入框：

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

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

我的問題是，只有第一個按鈕的作品，所以我需要一個解決方案，使所選行的值傳遞背部。我已經增加了tr id，但我不知道我需要做什麼......但我假設它需要涉及$。（this）的東西，並且還會增加inputbox /按鈕。消除按鈕並讓行本身具有onclick可能更容易？無論哪種方式，我感謝任何幫助！

Answer 1

你可以做什麼ID給予他們唯一的ID，然後給他們所有的同一類：

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

然後使用類作爲參考和值的ID;

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

    // your remaining code here 
}); 

，並獲得所選行的文本編輯的值，你可以使用該按鈕的id搶值引用它，如下圖所示，也可以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

這是因爲您的輸入框全部共享相同的ID並且所有按鈕共享相同的ID。您網頁上的每個元素都必須擁有唯一的ID。

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

這只是第一個按鈕的作品，因爲它只有找到具有該ID一個元素的原因，它是第一個按鈕，其餘的被忽略。

因此，要解決這個問題，你可以作爲一個類添加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 
});