繁体   English   中英

在javascript中获取td文本框值

[英]Get td textbox value in javascript

<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表。 我的要求是在文本框中获取每个“数量”值,然后乘以“价格”,最后将总数显示在底部。 有人可以帮我用JavaScript吗。

请将来发布您在帖子中尝试过的内容,更多的人将愿意帮助您修复代码。 在此处查看有关如何使用代码发布示例的更多详细信息。 但是我对上面的内容有所了解,并迅速编写了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));
}

如果您重构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结构不变。 但是,您可以根据需要添加任意多的额外行,只要它们保持相同的结构即可。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM