在jQuery中获取选定单元格的值

Question

我正在使用一些免费脚本在单击表格单元格时突出显示它。它可以多次单击，因此我可以一次选择多个单元格。当我单击单元格时，我想检索它们的值并显示到下面的输入中，以便在完成突出显示后发布它。我的脚本如下所示：

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

        }
    );

在displayVals 函数的这个例子中，我使用alert 来显示我现在选择的单元格。它显示没有问题，但在名为 clicked 的输入中没有粘贴任何内容，p.info 中也没有出现任何内容。

如果有人可以帮助我，我将不胜感激。

Answer 1

在点击事件中this 只指向被点击的元素而不是所有的tds。

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

.html() 返回一个字符串，因此您不需要连接，并且您使用 this 而不是 item：

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

列出所有多个值

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(", "));

}