Javascript 带有选择/取消选择和汇总选项的表

我已经创建了一个表。现在，我正在尝试让一个

onClick

事件添加一个选项，在该选项中，我可以单击表中的方块来选择它们，然后再次单击以取消选择它们。最后，我想让它显示总量，我的意思是，它像计算器一样将选定的平方相加

<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>

表，td，th{
边框：1px纯黑；
}
桌子{
边界塌陷：塌陷；
}
模特儿
趋势
钛
家庭帕克
Førerasistentpakke
斯蒂尔帕克
最终价格
库加
401000
420000
1000
10200
9200
$
C-max
320000
335000
1000
9400
3600
$
集中
255000
325000
900
12500
9000
$
蒙迪欧
281000
361000
1100
9900
7200
$

---

我正在尝试这样做，以便我可以单击其中一个插槽，可以选择多个插槽，最后它将显示所有选定选项的总价。

我建议您在TD中添加/删除一个类。然后，“选定”可以具有不同的背景色

如果您使用的是jQuery，那么可以使用如下内容（未经测试）：

现在您可以使用CSS类来指示它已被选中

我在这里添加了一个JSFIDLE：

我希望这就是你想要的：-）

更新： 根据要求为每行添加计算：

更新2：

---

Vanilla JS版本：

添加一个保存当前状态的属性，如

我尝试让它这样当点击方块时，它会改变背景，使其看起来像是被切换的，有取消切换的选项将背景更改回白色非常感谢，但我注意到它有一个bug，当你点击“最终价格”标签下的一个方块时，它会断裂，你知道如何在每一行的最终价格栏中显示价格吗？很可能，它是组合在一起的。我没有验证任何东西，例如$will引起NaN:）但我想你明白了。让我看看它-等一下：-）说得不够，非常感谢！你不知道这让我有多高兴，在过去的8个小时里，我一直在苦苦挣扎，没有任何成功的迹象，再次感谢你！抱歉再次询问，但我对JS有点陌生，我有点挣扎着在我自己的文件或记事本++文档中实现这一点，你介意帮我最后一个忙，教我如何正确使用不同的部分吗？

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