0

I have a question about "div restriction for Table in jQuery".

I have a table: 

<div id="slctble">
   <table border="1" cellspacing="2" id="sample">
    <tr class="toprow">
        <td> </td>
        <td>John</td>
        <td>Jane</td>
        <td>Total</td>
    </tr>
    <tr>
        <td class="leftcol">January</td>
        <td class="data">123</td>
        <td class="data">234</td>
        <td class="data">357</td>
    </tr>
    <tr>
        <td class="leftcol">February</td>
        <td class="data">135</td>
        <td class="data">246</td>
        <td class="data">381</td>
    </tr>
    <tr>
        <td class="leftcol">March</td>
        <td class="data">257</td>
        <td class="data">368</td>
        <td class="data">625</td>
    </tr>
    <tr>
        <td class="leftcol">Total</td>
        <td class="data">515</td>
        <td class="data">848</td>
        <td class="data">1363</td>
    </tr>
   </table>
 </div>

I have jQuery code: 

<script type='text/javascript'>
$(window).load(function(){
$("#slctble td.leftcol").selectable({
    filter:'td',
    stop: function() {        
        $(".ui-selected input", this).each(function() {
            this.checked= !this.checked

            });
    }
});
});

</script>

I want to restrict my "div" with "table" in jQuery, but this "space" between "slctble" and "td" work not in jQuery.

Can you give some advice?

An example is: http://www.simroll.de/newhtml.html

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
aldimeola1122
  • 806
  • 5
  • 13
  • 23
  • 1
    didn't understand what exactly you were trying to accomplish - but using `$(document).ready(...` instead of `$(window).load(...` would be a good practice – Yaron U. Nov 07 '12 at 10:20
  • So you want the other table cells to be selectable as well? Because your code works, there's just a bad css selector for the orange color - change .leftcol.ui-selecting to .ui-selecting – Ozrix Nov 07 '12 at 11:05

1 Answers1

0

You must bind "selectable" to the container - #sample in your case.

$("#sample").selectable({
 filter:'tr' 
});
Sergii
  • 1,320
  • 10
  • 10
  • this is ok, can you see my example, if i make so, i can'not select the numbers(numbers are not selectable). – aldimeola1122 Nov 07 '12 at 10:52
  • hi this is very nice, but i want to just click on the (for an example) checkbox, and drag across the checkboxes, then check a bunch of them. Look through : http://jsfiddle.net/aldimeola1122/NM3ft/3/ – aldimeola1122 Nov 07 '12 at 17:06