如何通过jquery获取点击按钮时输入字段的值？

Question

我有下面的表格有下拉部分，输入字段和删除按钮在每一行。当我单击行的delete按钮时，我想获得相应的输入字段行。

​

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

​

但是它提供了undefined的值。请帮我找出这个问题的答案。

Answer 1

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

然后使用下面的代码，它就可以工作了。

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

'#delete-row'到'.delete-row'，这样click就会被类触发。

$('this') to $(this)删除'，这样代码就知道this引用了被单击的对象。

.closest('td') to .closest('tr') your need tr beucase你的输入不在与按钮相同的td内

'input[name="price"]' to '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>

​

Answer 2

$('this')

应该是

$(this)

否则，您将查找一个名为this的标记，您传入的是字符串而不是上下文

编辑:还请注意，您将只访问最接近的td，而不是壁橱tr，因此您不会在td中找到输入标记，因为它与兄弟td相同

Answer 3

除了Shard的回答之外，您还需要重新考虑在每一行上使用id="delete- row“。一个id在一个页面上应该只出现一次，所以应该使用一个类来代替。