Getting value out of selected td

Question

Currently i have a selectable table which i can drag and select tds in a column. However i would like to get all the values from each of this td cells. How do i go about doing this? i have tried .each() but it still does not work

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

get the values where/when? `$('td.tdItem')`? – Marc B Sep 25 '12 at 16:33 — Marc B, Sep 25 '12 at 16:33
how should i even iterate through the tds which i selected? – smallcat31 Sep 25 '12 at 16:50 — smallcat31, Sep 25 '12 at 16:50

score 0 · Answer 1 · answered Sep 25 '12 at 16:35

0

You can iterate over all the td's in your document and check if has the selected class..

IF yes then get that Try this

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

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

answered Sep 25 '12 at 16:35

Sushanth --

55,259
9
66
105

but all my tds have the same class. This would give me all the tds information and not the selected 1s – smallcat31 Sep 25 '12 at 16:53
But if your td's are selected then it will be given a different class right.. Find out what that class is by inspecting the element – Sushanth -- Sep 25 '12 at 16:55
Why not just `$('td.tdItem')`? no point in looping over all tds yourself when jquery can do the filtering for you. – Marc B Sep 25 '12 at 16:59

score 0 · Answer 2 · answered Sep 25 '12 at 16:36

You can use element.innerText to get the text content of any HTML element. For example, on this page you can use $(".question-hyperlink")[0].innerText to get the question text. $(selector)[0] is a plain old HTML element.

Or, staying in jQuery, you can use $(selector).text() to do the same thing. Something like $(".question-hyperlink").text() works exactly the same way.

score 0 · Answer 3 · answered Sep 25 '12 at 16:38

0

get TD of each TR

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

});

answered Sep 25 '12 at 16:38

Anoop

23,044
10
62
76

Supr · Answer 4 · 2012-09-26T07:35:22.907

The selectable plugin adds the class ui-selected to any selected element, so simply:

$('.ui-selected')

will give you all selected elements. Limit to your .tdItems if you have other selectable things by using:

$('.tdItem.ui-selected')

If you want to do something every time the selection changes, then you can use the selected or stop callback in the .selectable({...}) options. Putting it all together gives us something like:

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.

Getting value out of selected td

4 Answers4