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

Table with select/deselect and summarize option

本文关键字：选项 表格 有选择 取消 选择      更新时间：2023-09-26

我创建了一个表。现在我正在尝试让一个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：香草JS版本：https://jsfiddle.net/vhwLxhsg/4/

相关文章：