Question

I’m using some freebie script to highlight table cell when it’s clicked. It can be clicked multiple, so I can have selected many cells in one time. When I’m clicking the cells I want to retrieving values of them and displaying into input below so I can POST it when I finish highlighting. My script looks like below:

function displayVals(item) {
        var multipleValues = $(this).html() || [];
        $("p.info").html("<b>Multiple:</b> " + multipleValues.join(", "));
        alert($(item).html()); 
        $("#clicked").val(multipleValues.join(", "));
    }

    $(document).ready(
        function(){
            $('#table3').highlight('td');
            $('#table3').highlight('td', 'highlight-selected', 'mousedown');
            $('#table3 td').click(function() { 
                displayVals(this);
            });

        }
    );

In this example in displayVals function I’m using alert to showing which cell I select now. It’s shows with no problem but nothing paste in the input called clicked and nothing appear in p.info.

If anyone can help me with that I will be grateful.

Answer 1

Within the click event this points only to the clicked element not to all tds.

$('#table3 td').click(function() { 
     displayVals(this);
});

The .html() returns a string so you don’t need the joins and you use this instead of item:

function displayVals(item) {
    var multipleValues = $(item).html() || '';
    $("p.info").html("<b>Multiple:</b> " + multipleValues);
    alert($(item).html());
    $("#clicked").val(multipleValues);
} 

List all multiple Values

function displayVals(item) {
  var multipleValues = [];
  $(item)
    // Search the parrent table
    .closest('table')
    // Get any highlight selected td
    .find('td.highlight-selected')
    // Iterate and add the html to multipleValues
    .each(function(){ multipleValues.push($(this).html()) })


    $("p.info").html("<b>Multiple:</b> " + multipleValues.join(", "));
    alert(multipleValues.join(", "));
    $("#clicked").val(multipleValues.join(", "));

}