CODEWITHSUNDEEP
javascripthtmladditioncalculator
Haliaka
Haliaka

Reputation: 15

Table with select/deselect and summarize option

I've created a table. Now I'm trying to have an onClick event add an option where I can click the squares inside the table to select them and click again to deselect them. At the end I wish to have it to display the total amount, by that I mean that it adds together the selected squars like a calculator would do.

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

I'm trying to make it so that I can click on one of the slots, able to select multiple, and at the end it will display the total price for all selected options.

Upvotes: 1

Views: 264

Answers (1)

Jannik Rasmussen
Jannik Rasmussen

Reputation: 397

I'd suggest you add/remove a class to your TD's. The "selected" can then have a different background color.

If you're using jQuery, you can use something like this (not tested): 

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

Now you can use the CSS class to indicate it is selected.

I've added a JSFiddle here: https://jsfiddle.net/vhwLxhsg/

I hope this is what you are looking for :-)

UPDATE: Added calc. for each row, as requested: https://jsfiddle.net/vhwLxhsg/2/

UPDATE 2: Vanilla JS version: https://jsfiddle.net/vhwLxhsg/4/

Upvotes: 2

Related Questions