1

I have a table

<table>
    <tr>
        <td><div class="line_1 div_1" line='1' number='1'></div></td>
        <td><div class="line_1 div_2" line='1' number='2'></div></td>
        <td><div class="line_1 div_3" line='1' number='3'></div></td>
        <td><div class="line_1 div_4" line='1' number='4'></div></td>
        <td><div class="line_1 div_5" line='1' number='5'></div></td>
    </tr>
    <tr>
        <td><div class="line_2 div_1" line='2' number='1'></div></td>
        <td><div class="line_2 div_2" line='2' number='2'></div></td>
        <td><div class="line_2 div_3" line='2' number='3'></div></td>
        <td><div class="line_2 div_4" line='2' number='4'></div></td>
        <td><div class="line_2 div_5" line='2' number='5'></div></td>
    </tr>
    <tr>
        <td><div class="line_3 div_1" line='3' number='1'></div></td>
        <td><div class="line_3 div_2" line='3' number='2'></div></td>
        <td><div class="line_3 div_3" line='3' number='3'></div></td>
        <td><div class="line_3 div_4" line='3' number='4'></div></td>
        <td><div class="line_3 div_5" line='3' number='5'></div></td>
    </tr>
</table>

And what I need is. With jQuery function, which demo is here ->http://jqueryui.com/selectable/ I need to create prety simmilar function.

I simply have an 3x5 array in js and when I select the divs, it changes numbers in this array.

-- pseudocode --
var tab = new Array();
tab[1] = new Array(0,0,0,0,0,0);
tab[2] = new Array(0,0,0,0,0,0);
tab[3] = new Array(0,0,0,0,0,0);

if( $('div').isSelected() ){
    tab [$(this).attr('line')] [$(this).attr('div')] = 1;
}

In the demo after you selected the divs, it changed the background.

Here, I would have the array with 0 and 1 if it was selected or not

When I tried the .selectable() from the demo, all page started to loop, although I have jquery 1.9.1. Thanks for the help.

4

2 回答 2

1

这是你要找的吗？

正如@Lopside 所说，在使用自定义属性时使用“数据-...”属性。

$(function () {
    var tab = new Array();
    $("#selectOptions").selectable({
        stop: function () {
            tab[1] = new Array(0, 0, 0, 0, 0, 0);
            tab[2] = new Array(0, 0, 0, 0, 0, 0);
            tab[3] = new Array(0, 0, 0, 0, 0, 0);

            $("div.ui-selected", this).each(function () {
                tab[$(this).data('line')][$(this).data('number')] = 1;
            });                
        }
    });
});
于 2013-07-26T13:35:21.630 回答
0

使用 HTML 5 的数据集属性。

请务必查看底部的小提琴示例。

HTML：

<table>
    <tr>
        <td><div class="line_1 div_1 selectable" data-line='1' data-number='1'>1</div></td>
        <td><div class="line_1 div_2 selectable" data-line='1' data-number='2'>2</div></td>
        <td><div class="line_1 div_3 selectable" data-line='1' data-number='3'>3</div></td>
        <td><div class="line_1 div_4 selectable" data-line='1' data-number='4'>4</div></td>
        <td><div class="line_1 div_5 selectable" data-line='1' data-number='5'>5</div></td>
    </tr>
    <tr>
        <td><div class="line_2 div_1 selectable" data-line='2' data-number='1'>1</div></td>
        <td><div class="line_2 div_2 selectable" data-line='2' data-number='2'>2</div></td>
        <td><div class="line_2 div_3 selectable" data-line='2' data-number='3'>3</div></td>
        <td><div class="line_2 div_4 selectable" data-line='2' data-number='4'>4</div></td>
        <td><div class="line_2 div_5 selectable" data-line='2' data-number='5'>5</div></td>
    </tr>
    <tr>
        <td><div class="line_3 div_1 selectable" data-line='3' data-number='1'>1</div></td>
        <td><div class="line_3 div_2 selectable" data-line='3' data-number='2'>2</div></td>
        <td><div class="line_3 div_3 selectable" data-line='3' data-number='3'>3</div></td>
        <td><div class="line_3 div_4 selectable" data-line='3' data-number='4'>4</div></td>
        <td><div class="line_3 div_5 selectable" data-line='3' data-number='5'>5</div></td>
    </tr>
</table>

Javascript/jQuery：

//-- pseudocode --
var tab = new Array();
tab[1] = new Array(0,0,0,0,0,0);
tab[2] = new Array(0,0,0,0,0,0);
tab[3] = new Array(0,0,0,0,0,0);

$(function(){
$('.selectable').click(function(){
    var r = $(this).data('line'); //This is your row (in the array)
    var c = $(this).data('number'); //This is your column (in the array)
    //Do something with this code...
});
});

由于嵌套数组具有从 0 开始的索引，因此您的列号实际上是[c-1].

例子：

我一直在玩它，在这里我有一个更完整的演示供您查看。这可能会给你一些关于你能做什么的更多想法。

于 2013-07-26T13:26:19.850 回答