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的类中添加/删除类。然后，“选定”可以具有不同的背景颜色。

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

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

现在，您可以使用CSS类来表明它已被选中。

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

我希望这是您正在寻找的:-)

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

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

关于javascript - 带有选择/取消选择和汇总选项的表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34663152/