使用jQuery可選插件獲取選定的行和列

我正在使用jQuery ui可選插件。它工作得很好，但是我需要的是獲得所選行和列的長度。我將使用jQuery .attr中的這些數字將選定的單元格與colspan和rowspan一起分組。使用jQuery可選插件獲取選定的行和列

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

HTML代碼是用jQuery動態生成的：

$("#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的選擇返還數量？

來源

2014-11-03 Beeelze

請向我們顯示您的HTML代碼。 – vaso123 2014-11-03 15:52:27

你使用jQuery UI可選或其他的東西..？ – 2014-11-03 16:02:17

是的，我使用jquery ui selectable。 – Beeelze 2014-11-03 16:03:47

我通過減去所有選中的< td>的2個部分的id來解決了我的問題。一部分是唯一選定行的數量，一部分是針對唯一選定列的數量。然後，我使用這些數字值作爲動態值與.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"); 
    } 

});

我希望這可以幫助其他人以及未來。

來源

2014-11-04 09:32:34 Beeelze

使用jQuery可選插件獲取選定的行和列

回答

相關問題