Question

I have a table with values.

<table id="myTable">
<tr>
    <th title="Text to copy to list">header 1</th>
    <th title="Text to copy to list">header 2</th>
    <th title="Text to copy to list">header 3</th>
</tr>
<tr>
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Value 3</td>
</tr>
</table>

<div id="selectedVlues"></div>

I need to be able to click on a with value and add that value to the #selectedVlues div, while adding a class=”added” to that column.

I need to be able to select any number of th and list them one below another.

<div id="selectedVlues">
    header 2<br>
    header 3<br>
</div>

If I click on a selected item either in the table header or the list, needs to remove that item from the list and remove class=”added” from the column.

So far I have only this:

$(".myTable th").click(function() {
    var headerVal = $(this).text();
    $("#selectedVlues").text(catVal+"<br>");
});

Not really sure how to add the rest…

Answer 1

Something like this

example jsfiddle

var $myTable = $('#myTable'),
    $headers = $('#myTable th'),
    $cells = $('#myTable td'),
    $selectedValues = $('#selectedValues');

$headers.click(function() {
    // clicked header
    var $this = $(this);

    if ($this.hasClass('added')) {
        // remove added class from column
        $this.removeClass('added');
        $cells.each(function() {
            var $cell = $(this);
            if ($cell.index() === $this.index()) {
                $cell.removeClass('added')
            }
        });
        // remove from selected values
        $selectedValues.find(':contains("' + $this.text() + '")').remove();
    } else {
        // add class
        $this.addClass('added');
        $cells.each(function() {
            var $cell = $(this);
            if ($cell.index() === $this.index()) {
                $cell.addClass('added')
            }
        });
        $selectedValues.append('<li title="remove">' + $this.text() + '</li>');
    }
});

$selectedValues.delegate('li', 'click', function() {
    // clicked list item
    var $this = $(this);
        $header = $headers.filter(':contains("' + $this.text() + '")');

    // remove 'added' class
    $header.removeClass('added');
    $cells.each(function() {
        var $cell = $(this);
        if ($cell.index() === $header.index()) {
            $cell.removeClass('added')
        }
    });

    $this.remove();
});