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）的值插入另一个表的最后一行并关闭open模式并关注该输入框：

$('#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，但我不确定我需要做什么......但我认为它需要涉及$。（这个）的东西，并且还会增加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来引用它，如下所示获取值，并且还可以使用a来创建表行。循环轻松快捷。

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

将jQuery Modal中的值传递到最后一个输入框

2 个答案: