Question

我正在使用jQuery ui Selectable插件。它的工作完全正常，但我接下来需要的是获得所选行和列的长度。我将使用jQuery .attr将这些数字与colspan和rowspan一起分组。

firstCell = $(".ui-selected").first().attr("id");
$("#"+firstCell).attr({"colspan": <dynamic number columns>, "rowspan": <dynamic number rows>});

使用jQuery动态生成HTML代码：

$("#div1").empty()

var RH = $("#RH").text();

if(RH) {

    $("#div1").css("display", "block");

    var html = '<table class="rack" style="border=0; cellspacing=0; cellpadding=1; width: 100%;"><thead><tr></tr></thead><tbody id="selectable">';
    html += "<tr><th width='10%'>&nbsp;</th><th width='20%'>Front</th><th width='50%'>&nbsp;&nbsp;&nbsp; Interior</th><th width='20%'>Back</th></tr>";

    for (var i = RH; i >= 1; i--) {

        html += '<tr>\
                    <th>'+i+'</th>\
                    <td id="r'+i+'c1" class="atom state_F r'+i+'c1">\
                        <div title="Free rackspace">&nbsp;</div>\
                    </td>\
                    <td id="r'+i+'c2" class="atom state_F r'+i+'c2">\
                        <div title="Free rackspace">&nbsp;</div>\
                    </td>\
                    <td id="r'+i+'c3" class="atom state_F r'+i+'c3">\
                        <div title="Free rackspace">&nbsp;</div>\
                    </td>\
                </tr>';
        }


    html += '</tbody></table>';
    $(html).appendTo('#div1');
}

如何让jQuery ui选择返回的行/列数？

Answer 1

我通过减去所有选中的＆的ID来解决我的问题。 td＆gt;分为两部分。一部分是唯一选择的行的数量，一部分是唯一选择的列的数量。然后，我将这些数值用作带有.attr属性的行的动态值。

$("#selectable").selectable({
    filter: 'td',
    stop: function () {
        loop = 0;
        var rowList = Array();
        var columnList = Array();

        var result = $("#select-resultSpan").empty();
        $(".ui-selected", this).each(function() {
            var index = $("td").index(this);
            result.append("<li>" + $(this).attr("class") + "</li>");    
            var selectedID = $(this).attr("id");
            var row = selectedID.substr(0, 3);
            var column = selectedID.substr(3);

            rowList.push(row);
            columnList.push(column);

            if(loop == 0) {
                firstCell = $(".ui-selected").first().attr("id");
                $("#"+firstCell).removeClass("atom state_F");
                $("#"+firstCell).addClass("atom state_T");  


                $(".ui-selected").not($("#"+firstCell)).remove();

                loop += 1;
            }
        });

        var uniqueRows = ($.unique(rowList).length); // dynamic rowspan value
        var uniqueColumns = ($.unique(columnList).length); // dynamic colspan value

        $("#"+firstCell).attr({"colspan": uniqueColumns, "rowspan": uniqueRows});   

        $("#addObject").css("display", "block");
    }

});

我希望将来能帮助别人。

使用jQuery Selectable插件获取选定的行和列

1 个答案: