Table 与 select/deselect 和汇总选项

Question

我创建了一个 table。现在我正在尝试让 onClick 事件添加一个选项，我可以在其中单击 table 内的方块到 select 它们，然后再次单击以取消 select 它们。最后我希望它能显示总金额，我的意思是它像计算器一样将 selected 的正方形加在一起。

<style>
    table, td, th {
        border: 1px solid black;
    }
    table {
        border-collapse: collapse;
    }
</style>

<table>
<tr>
    <td bgcolor="b8cce4">Modell</td>
    <td>Trend</td>
    <td>Titanum</td>
    <td>Familiepakke</td>
    <td>Førerassistentpakke</td>
    <td>Stilpakke</td>
    <td>Final price</td>
</tr>
<tr>
    <td bgcolor="b8cce4"><b>Kuga</b></td>
    <td>401000</td>
    <td>420000</td>
    <td>1000</td>
    <td>10200</td>
    <td>9200</td>
    <td>$</td>
</tr>
<tr>
    <td bgcolor="b8cce4"><b>C-max</b></td>
    <td>320000</td>
    <td>335000</td>
    <td>1000</td>
    <td>9400</td>
    <td>3600</td>
    <td>$</td>
</tr>
<tr>
    <td bgcolor="b8cce4"><b>Focus</b></td>
    <td>255000</td>
    <td>325000</td>
    <td>900</td>
    <td>12500</td>
    <td>9000</td>
    <td>$</td>
</tr>
<tr>
    <td bgcolor="b8cce4"><b>Mondeo</b></td>
    <td>281000</td>
    <td>361000</td>
    <td>1100</td>
    <td>9900</td>
    <td>7200</td>
    <td>$</td>
</tr>

我正在尝试做到这一点，以便我可以点击其中一个插槽，能够 select 多个，最后它会显示所有 selected 的总价选项。

Answer 1

我建议你 add/remove class 给你的 TD。 "selected" 可以有不同的背景颜色。

如果您正在使用 jQuery，您可以使用类似这样的东西（未测试）：

$('td').click(function() { 
$(this).toggleClass('selected');
console.log($(this).text());
});

现在您可以使用 CSS class 来表示它已被选中。

我在这里添加了一个 JSFiddle： https://jsfiddle.net/vhwLxhsg/

希望这就是您要找的:-)

更新：添加计算。对于每一行，根据要求：https://jsfiddle.net/vhwLxhsg/2/

更新 2：香草 JS 版本：https://jsfiddle.net/vhwLxhsg/4/

Table 与 select/deselect 和汇总选项

Table with select/deselect and summarize option

html

javascript

add

calculator