Question

<table border="1" id="shoppingCartTable">
    <tr>
        <th></th>
        <th>Name</th>
        <th>Qty</th>
        <th>Price</th>
    </tr>

    <tr>
        <td><img src='images/products/d66506_f_b2ccat_1.jpg' height='150' width='150'/></td>
        <td>adidas Kanadia TR 6 - Grey/Black</td>
        <td id='tdqty'><input type='text' name='qty' value=1></td>
        <td id='tdprice' align='right'>$129.00</td>
    </tr>
    <tr>
        <td><img src='images/products/35874_107292_79586.jpg' height='150' width='150'/></td>
        <td>PGF GENTS MARKSMAN GOLF PACK</td>
        <td id='tdqty'><input type='text' name='qty' value=2></td>
        <td id='tdprice' align='right'>$1,198.00</td>
    </tr>
    <tr>
        <td><img src='images/products/dsc_8058.jpg' height='150' width='150'/></td>
        <td>Puma Hooded Sweat - Pink - Women's</td>
        <td id='tdqty'><input type='text' name='qty' value=1></td>
        <td id='tdprice' align='right'>$80.00</td>
    </tr>                                                    
    <tr>
        <td colspan="3" align="right">Total:</td>
        <td align="right">$1,407.00</td>
    </tr>
</table>
<button type="button" onclick="getTotalPrice()">Get Total</button>

我上面有动态生成的HTML表格。我的要求是在文本框中获取每个'qty'值并乘以'price'然后最终显示底部的总数。有人可以帮我解决这个问题。

Answer 1

请在将来发布您在帖子中尝试的内容，更多人愿意帮助修复您的代码。 Check here了解有关如何使用代码发布示例的更多详细信息。但是我对你上面的内容进行了一次破解并快速编写了javascript。它显示了它将如何根据表中的内容更新总数。

http://jsfiddle.net/jawilliams346614/3vc3dty4/1/

function getTotalPrice() {
    var subtotal = 0;
    $("#shoppingCartTable tr").each(function () {
        if( $(this).find('input[name="qty"]').length > 0 ) {
            qty = $(this).find('input[name="qty"]').val();
            price = Number($(this).find('#tdprice').text().replace(/[^0-9\.]+/g,""));
            subtotal += qty * price;
        }
    });
    $('#total').text("$" + subtotal.toFixed(2));
}

Answer 2

如果您重构HTML以使脚本编写更容易，那会更好，但以下内容基于对标记的最小更改。

如果将表格和按钮括在表单中并让按钮将对自身的引用传递给函数，则可以非常轻松地访问输入元素：

<form>
  <table border="1" id="shoppingCartTable">
    ...
  </table>
  <button type="button" onclick="getTotalPrice(this)">Get Total</button>
</form>

有了这些，您可以获得数量和相关价格，然后将其写入总单元格。以下内容取决于当前的DOM结构，如果需要，可以使它更加独立（我怀疑它应该是这样）。

以下函数计算价格并输入总单元格。它使用了几个辅助函数，但是是普通的javascript并且不依赖于大型库（并且主函数只比提供的jQuery解决方案长一行）。

// Get the text in a cell using either textContent or innerText,
// whichever is supported
function getText(el) {
  if (typeof el.textContent == 'string') {
    return el.textContent;
  } else if (typeof el.innerText == 'string') {
    return el.innerText;
  }
}

// Formats a number with comma separators
// 1234567.99 -> 1,234,567.99
function formatWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function getTotalPrice(el) {
  var qtys = el.form.qty;
  var total = 0;
  var cell, inp, price, row;
  for (var i=0, iLen=qtys.length; i<iLen; i++) {
    inp = qtys[i];
    cell = inp.parentNode;
    total += +getText(cell.parentNode.cells[cell.cellIndex + 1]).replace(/[^\d\.]/g,'') * inp.value;
  }
  row = cell.parentNode;
  row.parentNode.rows[row.rowIndex + 1].cells[1].innerHTML = '$' + formatWithCommas(total.toFixed(2));
}

这不是很强大，因为它假设用户输入数量的有效值并且DOM结构不会改变。但是，如果它们保持相同的结构，您可以根据需要添加任意数量的行。

在javascript中获取td文本框值

2 个答案: