Question

我有一个包含3列及其中一些值的表格，我需要制作一些选择器，它可以改变价格与税收之间的“价格”值（在捷克代表中，现在是21％）。表看起来像这样：

<table id="one-column-emphasis">
<colgroup><col></colgroup>
<tbody>
  <tr>
    <th scope="col">...</th>
    <th scope="col">...</th>
    <th scope="col">Price</th>
  </tr>
  <tr>
    <td>Price of thing</td>
    <td>how long</td>
    <td>4PRICE</td>
  </tr>
    .
    .
    .
    .

对于选择器使用类似：

<a href="..">With ax</a>/<a href="..">Without tax</a>

link to table

Answer 1

只是为了帮助你从{{}}开始帮助你了解如何解决问题

HTML

<table>
    <tr>
        <th>Product</th>
        <th class="priceheader" data-taxstate="n">Price (€)</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td class="price">10</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td class="price">5</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td class="price">12</td>
    </tr>
</table>
<button class="tax">switch tax</button>

JS

var tax = "1.2" //20%
$(document).ready(function () {
    $(".tax").click(function () {
        if ($(".priceheader").attr("data-taxstate") == "n") {
            $(".price").each(function () {
                $(this).html(parseFloat($(this).html()) * tax);
            });
            $(".priceheader").attr("data-taxstate", "y");
        } else {
            $(".price").each(function () {
                $(this).html(parseFloat($(this).html()) / tax);
            });
            $(".priceheader").attr("data-taxstate", "n");
        }
    });
});

但这只是一个开始。你必须以正确的方式进行，然后你必须确保它没有单一值，其中切换将改变其值。

后续步骤

这只是您正在寻找的一个开始。你必须围绕你的价值观，还有更多美丽的方法来解决这个问题，这取决于你想要得到的东西：）

最好是计算税额，但将原始值保存在data- *属性中，不要计算回来。

希望这能帮到你！

JQ更改列值

1 个答案:

HTML

JS

后续步骤