將值從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將輸入框（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 / button。 取消按鈕可能更容易，而使行本身具有onclick？ 無論哪種方式，我都會感謝您的幫助！

Answer 1

這是因為您的輸入框都共享相同的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
});

Answer 2

您可以做什么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來引用它，以獲取如下所示的值，還可以輕松快捷地使用循環創建表行。

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