使用 jQuery 访问 TD 内部的 Div 标签
Access Div tag inside TD with jQuery
我有一个具有以下结构的表。
<table id="items">
<tbody>
<tr>
<th>SlNo</th>
<th>Item</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td><input type="text" class="slno"/></td>
<td><input type="text" class="cost"/></td>
<td><input type="text" class="qty"/></td>
<!-- <td><span class="price"></span></td>-->
<td class="price"> </td>
</tr>
<input type="button" id="example" value="submit" onClick="storeAndShowTableValues()"/>
</tbody>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$875.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$875.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">$875.00</div></td>
</tr>
</table>
使用jQuery,我想选择div Id的内容,小计,总计,支付金额和应付余额。
我用这个按钮来触发jQuery
<input type="button" id="example" value="submit" onClick="storeAndShowTableValues()"/>
我已经尝试过这样做,但它不起作用。
var qwer=$("#example").closest("tr").find(".subtotal");
我该怎么做?
var subtotal = $('#subtotal').text(),
total = $('#total').text(),
paid = $('#paid').val(),
due = $('.due').text();
对于这样的东西?
$(document).on('click', '#example', function(e) {
var subtotal = parseFloat($('#subtotal').text().replace(/[^0-9.]/g, '')),
total = parseFloat($('#total').text().replace(/[^0-9.]/g, '')),
paid = parseFloat($('#paid').val().replace(/[^0-9.]/g, '')),
due = parseFloat($('.due').text().replace(/[^0-9.]/g, ''));
$('ul').empty();
var all = { subtotal: subtotal, total: total, paid: paid, due: due }
for (x in all) {
var ax = all[x];
$('ul').append($('<li />', { text: x + ': ' + ax }))
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="items">
<tbody>
<tr>
<th>SlNo</th>
<th>Item</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td><input type="text" class="slno"/></td>
<td><input type="text" class="cost"/></td>
<td><input type="text" class="qty"/></td>
<!-- <td><span class="price"></span></td>-->
<td class="price"> </td>
</tr>
<input type="button" id="example" value="submit" />
</tbody>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$875.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$900.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">$420.00</div></td>
</tr>
</table>
<ul></ul>
或者这个怎么样?!
function getValues() {
var cost = parseFloat($('.cost').val().replace(/[^0-9.]/g, '')),
qty = parseFloat($('.qty').val().replace(/[^0-9.]/g, ''));
return {
cost: cost == cost ? cost : 0,
qty: qty == qty ? qty : 1,
subtotal: parseFloat($('#subtotal').text().replace(/[^0-9.]/g, '')),
total: parseFloat($('#total').text().replace(/[^0-9.]/g, '')),
paid: parseFloat($('#paid').val().replace(/[^0-9.]/g, '')),
due: parseFloat($('.due').text().replace(/[^0-9.]/g, ''))
}
}
function getValues() {
var cost = parseFloat($('.cost').val().replace(/[^0-9.]/g, '')),
qty = parseFloat($('.qty').val().replace(/[^0-9.]/g, '')),
subt = parseFloat($('#subtotal').text().replace(/[^0-9.]/g, ''));
if (this.subt == undefined) this.subt = subt
return {
cost: cost == cost ? cost : 0,
qty: qty == qty ? qty : 1,
subtotal: cost && qty ? subt : this.subt,
total: parseFloat($('#total').text().replace(/[^0-9.]/g, '')),
paid: parseFloat($('#paid').val().replace(/[^0-9.]/g, '')),
due: parseFloat($('.due').text().replace(/[^0-9.]/g, ''))
}
}
function calc() {
var v = getValues(),
newSub = (v.cost * v.qty) + v.subtotal,
newTot = newSub,
newDue = newTot - v.paid;
console.log(v, ''r'n', '(',v.cost,' * ',v.qty,')', '+', v.subtotal, (v.cost * v.qty) + v.subtotal)
$('#subtotal').text('$' + newSub);
$('#total').text('$' + newTot);
$('.due').text('$' + newDue);
}
calc();
$(document)
.on('change', '.cost, .qty, #paid', calc)
.on('click', '#example', calc)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="items">
<tbody>
<tr>
<th>SlNo</th>
<th>Item</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td><input type="text" class="slno"/></td>
<td><input type="text" class="cost"/></td>
<td><input type="text" class="qty"/></td>
<!-- <td><span class="price"></span></td>-->
<td class="price"> </td>
</tr>
<input type="button" id="example" value="submit" />
</tbody>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$875.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$875.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">$875.00</div></td>
</tr>
</table>
<ul></ul>
相关文章:
- 隐藏 DIV 标签,直到填充所有文本字段
- 如何将选定的日期月份和年份打印到不同的DIV标签中
- 使用 Div 标签的 location.href 属性时,Eval 不起作用
- For循环只打印一个DIV标记.不是8个DIV标签
- 清除 DIV 标签不起作用
- DIV 标签显示:内联块;
- 在自动刷新 DIV 标签内的 PHP 中表单将不起作用
- DIV标签和HTML5元素之间应该使用什么以及有什么区别(部分,文章)
- 使用 jQuery 更改内部特定 Div 标签内的 TD 值
- 使用 jQuery 访问 TD 内部的 Div 标签
- 如何设置目标=“_空白“;在DIV标签中
- Div标签向下滚动
- jquery通过所有Div标签将文本更改为超链接
- 如何在新选项卡中打开DIV标签内的内容
- 在Div标签中加载带有选择列表的图像
- 在数据列表中切换Div标签
- 替换WKWebView中DIV标签的多行文本内容
- 动态地在Div标签上追加另一个Div数据
- Javascript动态追加DIV标签
- Div标签代码提取器