Question

我创建了一张桌子。现在，我尝试在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>

我试图制作它以便我可以点击其中一个插槽，能够选择多个，最后它将显示所有选定选项的总价格。

Answer 1

我建议您在TD上添加/删除课程。＆＃34;选择＆＃34;然后可以有不同的背景颜色。

如果你正在使用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/

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

1 个答案: