Question

我有一个包含以下列的html表：产品名称，数量，价格或总量。

现在客户端将设置他想要订购的数量，并自动显示总列数以显示价格而不刷新页面。

同样在侧栏栏中显示所订购产品的总金额和金额。总发票种类。这可能吗？提前谢谢

<pre>
<table style="width:100%">
  <tr>
    <th>produkt name</th>
    <th>quantity</th> 
    <th>price</th>
     <th>Order</th>
    <th>total amount</th>
  </tr>
  <tr>
    <td>Phone</td>
    <td>34</td>
    <td>50</td>
    <td><input type="text" name="amount"></td>
    <td>xxx</td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>56</td>
    <td>94</td>
    <td><input type="text" name="amount"></td>
     <td>xxx</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>45</td>
    <td>80</td>
    <td><input type="text" name="amount"></td>
     <td>xxx</td>
  </tr>
</table>

Answer 1

当然，您可以将事件绑定到输入。因此，当值更改时，将触发该函数。

然后使用parent()，prev()和text()我们可以获得价格。

使用这些值，我们可以计算总数并在下一个表格单元格中插入该值。

我对代码进行了评论，希望它有意义！

＆＃13;

$('[name=amount]').on('change', function() {
  var amount = $(this).val(), /* get the amount, so the inputs value */
      price = $(this).parent().prev().text(), /* get the price */
      total = amount * price; /* calculate the total */
  $(this).parent().next().html( total ); /* insert it in the next tablecell */
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>produkt name</th>
    <th>quantity</th> 
    <th>price</th>
     <th>Order</th>
    <th>total amount</th>
  </tr>
  <tr>
    <td>Phone</td>
    <td>34</td>
    <td>50</td>
    <td><input type="text" name="amount"></td>
    <td>xxx</td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>56</td>
    <td>94</td>
    <td><input type="text" name="amount"></td>
     <td>xxx</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>45</td>
    <td>80</td>
    <td><input type="text" name="amount"></td>
     <td>xxx</td>
  </tr>
</table>

＆＃13;

Html ajax订单，生产的发票

1 个答案: