jQuery로 선택된 행과 열 가져 오기 선택 가능한 플러그인

Question

jQuery UI 선택 가능 플러그인을 사용하고 있습니다. 그것은 완벽하게 잘 동작하고 있지만, 다음으로 필요한 것은 선택된 행과 열의 길이를 얻는 것입니다. 이 숫자를 jQuery .attr과 함께 사용하여 선택된 셀을 colspan 및 rowspan과 함께 그룹화합니다.

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를 선택 반환 금액을 선택 할 것인가?

Answer 1

두 부분으로 모두 선택된 < td>의 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"); 
    } 

}); 

나는 다른 사람에게도 도움이되기를 바랍니다.