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>

但它给出undefined值。请帮我找出这个问题的答案。

Answer 1

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

然后使用以下代码，它可以工作。

我在jQuery代码中更改了以下4件事：

'#delete-row'到'.delete-row'所以点击是由班级触发的。

$('this')至$(this)删除'，以便代码知道this引用所点击的对象。

.closest('td')至.closest('tr')您需要tr beucase您的输入不在与按钮相同的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);
});

工作演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

<div class="div1">
    <div class="div2">
        <a>Test Test Test</a>
        <p>bla bla bla<p>
    </div>
</div>

应该是

$('this')

否则你正在寻找一个名为this的标签，你传入的是字符串而不是上下文

编辑：还注意到你只去了最近的td而不是壁橱tr，因此你不会在td中找到一个输入标签，因为它带有一个兄弟td

Answer 3

除了Shard的回答之外，您还需要重温使用id =＆＃34; delete-row＆＃34;在每一行。 id应该只在页面上出现一次，因此应该使用一个类。

Answer 4

更改您的脚本如下。

$(document).on('click', '#delete-row', function(e) {
  e.preventDefault();
  var value = $(this).parent().prev().find('input[name="price"]').val();
  alert(value);
});

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

4 个答案: