Add selected values to a div w/ jQuery

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" fro开发者_开发百科m 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...

---

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();
});

---

http://jsfiddle.net/N6h8G/6/

$("#myTable th").click(function() {
    var column_header = $(this);
    var column_rows = $('#myTable tr td:nth-child(' + (column_header.index() + 1) + ')');

    if (column_header.hasClass('added')) {
        $('#selectedValues #' + column_header.index()).remove();
        column_header.removeClass('added');
    }
    else {
        $('#selectedValues').append('<span id="' + column_header.index() + '">' + column_header.text() + '</span>');
        column_header.addClass('added');
    }

    column_rows.each(function(i, row) {
        if ($(row).hasClass('added')) {
            $(row).removeClass('added');
        }
        else {
            $(row).addClass('added');
        }
    });
});

EDIT: Sorry, updated response.

EDIT 2: Updated based on comments and fixed a syntax error.

---

Try with this Jquery

$("#myTable th").click(function() {
    var table_value = $(this).text();
     $("#selectedVlues").append(table_value+'<br />').addClass('added');
});

---

$(function(){
        $("#myTable th").click(function() {
        debugger;
        var headerVal = $(this).text();
        $("#selectedVlues").html(headerVal+"<br>");
        indexVal = $(this).index();
        $("#myTable").find("td").eq(indexVal).addClass("added");
    });
});

check this out