使用jQuery访问TD内的Div标签

I have a table with the following structure.

我有一个具有以下结构的表。

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

with jQuery, I want to select the contents of div Ids, subtotal,total,amount paid and balance due.

使用jQuery,我想选择div ID,小计,总计,支付金额和余额到期的内容。

There is this button i use to trigger the jQuery

我用这个按钮来触发jQuery

<input type="button" id="example" value="submit" onClick="storeAndShowTableValues()"/>

I already tried to do it like this, but it's not working.

我已经尝试过这样做,但它不起作用。

var qwer=$("#example").closest("tr").find(".subtotal");

How do i do this?

我该怎么做呢?

1 个解决方案

#1

var subtotal = $('#subtotal').text(),
    total = $('#total').text(),
    paid = $('#paid').val(),
    due = $('.due').text();

For Something like this?

对于像这样的东西?

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

Or how about this?!

或者这个怎​​么样?!

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>