我有下表,每行都有下拉部分、输入字段和删除按钮。我想在单击一行的删除按钮时获取输入字段的相应行。
$(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>
但它给出了未定义
值。请帮我找出这个问题的答案。
最佳答案
您不应该有多个具有相同 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>
关于javascript - 如何使用jquery获取点击按钮时输入字段的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46686638/