javascript - 如何使用jquery获取点击按钮时输入字段的值？

Question

我有下表，每行都有下拉部分、输入字段和删除按钮。我想在单击一行的删除按钮时获取输入字段的相应行。

$(document).on('click', '#delete-row', function() {
    var value = $('this').closest('td').find('input[name="price"]').val();
    alert(value);
    // $(this).closest('tr').remove();
    //return false;
});

<table class="table table-hover table-bordered" id="incomeId">
    <thead>
        <tr>
            <th>
                sn
            </th>
            <th>
                Title of income
            </th>
            <th>
                Price
            </th>
            <th>
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <select name="income-title[]" id="inputID" class="form-control">
                    <option value="select"> -- Select One --</option>
                    <option value="hostel fee"> hostel fee</option>
                    <option value="admission fee"> admission fee</option>
                    <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option>
                </select>
            </td>
            <td class="price">
                <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required">
            </td>
            <td>
                <a href="#"><i class="fa fa-trash" id="delete-row" style="pointer:cursor;"></i></a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <select name="income-title[]" id="inputID" class="form-control">
                    <option value="select"> -- Select One --</option>
                    <option value="hostel fee"> hostel fee</option>
                    <option value="admission fee"> admission fee</option>
                    <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option>
                </select>
            </td>
            <td class="price">
                <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required">
            </td>
            <td>
                <a href="#"><i class="fa fa-trash" id="delete-row" style="pointer:cursor;"></i></a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <select name="income-title[]" id="inputID" class="form-control">
                    <option value="select"> -- Select One --</option>
                    <option value="hostel fee"> hostel fee</option>
                    <option value="admission fee"> admission fee</option>
                    <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option>
                </select>
            </td>
            <td class="price">
                <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required">
            </td>
            <td>
                <a href="#"><i class="fa fa-trash" id="delete-row" style="pointer:cursor;"></i></a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>
                <select name="income-title[]" id="inputID" class="form-control">
                    <option value="select"> -- Select One --</option>
                    <option value="hostel fee"> hostel fee</option>
                    <option value="admission fee"> admission fee</option>
                </select>
            </td>
            <td class="price">
                <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required">
            </td>
            <td>
                <a href="#"><i class="fa fa-trash" id="delete-row" style="pointer:cursor;"></i></a>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>
                Total:Rs
                <div class="total" id="total" style="display:inline;">45</div>
            </td>
            <td></td>
        </tr>
    </tfoot>
</table>

但它给出了未定义值。请帮我找出这个问题的答案。

Answer 1

您不应该有多个具有相同 id 的元素，为此使用类。

然后使用以下代码即可运行。

我在您的 jQuery 代码中更改了以下 4 处内容:

'#delete-row' 更改为 '.delete-row'，以便由类触发点击。

$('this') 到 $(this) 删除 ' 以便代码知道 this指被点击的对象。

.closest('td') 到 .closest('tr') 您需要 tr 因为您的输入不在同一个内部td 作为按钮

'input[name="price"]' 到 'input[name="price\[\]"]' 您在名称中使用了price[]。

$(document).on('click', '.delete-row', function() {
  var value = $(this).closest('tr').find('input[name="price\[\]"]').val();
  alert(value);
});

工作演示

$(document).on('click', '.delete-row', function() {
  var value = $(this).closest('tr').find('input[name="price\[\]"]').val();
  alert(value);
  $("#total").text(($("#total").text() - value))
});

$('input[name="price\[\]"]').change(function() {
  var sum = 0;
  $('input[name="price\[\]"]').each(function() {
    sum += Number($(this).val());
  });
  $("#total").text(sum)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered" id="incomeId">
  <thead>
    <tr>
      <th>
        sn
      </th>
      <th>
        Title of income
      </th>
      <th>
        Price
      </th>
      <th>
        Action
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>



        <select name="income-title[]" id="inputID" class="form-control">
                        <option value="select"> -- Select One --</option>
                                                         <option value="hostel fee"> hostel fee</option>
                                                            <option value="admission fee"> admission fee</option>
                                                            <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option>

                                                </select>
      </td>
      <td class="price">
        <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required">

      </td>
      <td>
        <a href="#"><i class="fa fa-trash delete-row" id="" style="pointer:cursor;">delete</i></a>
      </td>

    </tr>
    <tr>
      <td>2</td>
      <td>



        <select name="income-title[]" id="inputID" class="form-control">
                        <option value="select"> -- Select One --</option>
                                                         <option value="hostel fee"> hostel fee</option>
                                                            <option value="admission fee"> admission fee</option>
                                                            <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option>

                                                </select>
      </td>
      <td class="price">
        <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required">

      </td>
      <td>
        <a href="#"><i class="fa fa-trash delete-row" id="" style="pointer:cursor;">delete</i></a>
      </td>

    </tr>
    <tr>
      <td>3</td>
      <td>



        <select name="income-title[]" id="inputID" class="form-control">
                        <option value="select"> -- Select One --</option>
                                                         <option value="hostel fee"> hostel fee</option>
                                                            <option value="admission fee"> admission fee</option>
                                                            <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option>

                                                </select>
      </td>
      <td class="price">
        <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required">

      </td>
      <td>
        <a href="#"><i class="fa fa-trash delete-row" id="" style="pointer:cursor;">delete</i></a>
      </td>

    </tr>
    <tr>
      <td>4</td>
      <td>



        <select name="income-title[]" id="inputID" class="form-control">
                        <option value="select"> -- Select One --</option>
                                                         <option value="hostel fee"> hostel fee</option>
                                                            <option value="admission fee"> admission fee</option>

                                                </select>
      </td>
      <td class="price">
        <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required">

      </td>
      <td>
        <a href="#"><i class="fa fa-trash delete-row" id="" style="pointer:cursor;">delete</i></a>
      </td>

    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td>Total:Rs
        <div class="total" id="total" style="display:inline;">45</div>
      </td>
      <td></td>


    </tr>
  </tfoot>
</table>