从选定的 td 中获取价值答案

【问题标题】：Getting value out of selected td从选定的 td 中获取价值
【发布时间】：2012-09-25 16:31:14
【问题描述】：

目前我有一个可选择的表格，我可以在一列中拖动和选择 tds。但是我想从每个 td 单元格中获取所有值。我该怎么做呢？我试过 .each() 但还是不行

<style type="text/css">
.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; }
</style>

<script>
    $(function() {
    $("table").selectable({
        filter: ".tdItem"
    });
});
</script>
</head>     

<body>


<table width="100%" border="1">
<%
    for(String t: time){
        out.println("<tr>");
        int i=0;
        for(String room: rooms){
            out.println("<td class='tdItem' align='center'>");
            out.println(room+" "+t);
            out.println("</td>");
            i++;
        }
        out.println("</tr>");
    }
%>

【问题讨论】：

在何处/何时获取值？ $('td.tdItem')?
我应该如何遍历我选择的 tds？

标签： javascript jquery html jsp jquery-ui-selectable

【解决方案1】：

您可以遍历文档中的所有 td 并检查是否有选定的类..

如果是，那么得到那个试试这个

var $td = $('tr td');

$.each($td , function(i){
     if( $(this).hasClass('tdItem'){
        console.log($(this).text())
     }
});

【讨论】：

但我所有的 tds 都有相同的类。这会给我所有的 tds 信息，而不是选择的 1s
但是如果您的 td 被选中，那么它将被赋予不同的类权利。通过检查元素找出该类是什么
为什么不只是$('td.tdItem')？当 jquery 可以为您进行过滤时，您自己循环所有 td 是没有意义的。

【解决方案2】：

您可以使用 element.innerText 来获取任何 HTML 元素的文本内容。例如，在此页面上，您可以使用$(".question-hyperlink")[0].innerText 获取问题文本。 $(selector)[0] 是一个普通的旧 HTML 元素。

或者，留在 jQuery 中，您可以使用 $(selector).text() 来做同样的事情。 $(".question-hyperlink").text() 之类的东西的工作方式完全相同。

【讨论】：

【解决方案3】：

获取每个TR的TD

$('table tr').each( function(i){
     $('td',this).each(function(){
           console.log($(this).text())
    });

});

【讨论】：

【解决方案4】：

可选插件将ui-selected 类添加到任何选定的元素，很简单：

$('.ui-selected')

将为您提供所有选定的元素。如果您有其他可选择的东西，请限制您的 .tdItems：

$('.tdItem.ui-selected')

如果您想在每次选择更改时执行某些操作，则可以使用the selected or stop callback in the .selectable({...}) options。把它们放在一起给了我们这样的东西：

function afterSelectionChanged(event, ui){    
    var $selectedElements = $('.tdItem.ui-selected');
    // Do something with the selected elements
}

$("table").selectable({
    filter:'.tdItem',
    stop: afterSelectionChanged 
});

See jsfiddle demo here.

【讨论】：