Таблица с выбором/снятием выделения и суммированием опции

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

Я предлагаю вам добавить/удалить класс для своих ТД. Затем «выбранный» может иметь другой цвет фона.

Если вы используете JQuery, вы можете использовать что-то вроде этого (не проверено):

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

Теперь вы можете использовать класс CSS, чтобы указать, что выбран.

Я добавил JSFiddle здесь: https://jsfiddle.net/vhwLxhsg/

Я надеюсь, что это то, что вы ищете :-)

UPDATE: Добавлено известково. для каждой строки, в соответствии с просьбой: https://jsfiddle.net/vhwLxhsg/2/

UPDATE 2: Vanilla JS версия: https://jsfiddle.net/vhwLxhsg/4/