tablesorter 플러그인에서 드롭 다운 상자를 사용할 수 있습니까?

Question

나는 php, ajax 및 tablesorter 플러그인을 사용하여 완벽하게 생성되는 테이블을 가지고있다. 이제는 입력 필드 중 일부를 드롭 다운 상자에 입력하여 사용자가 옵션을 변경할 필요가있을 때 옵션을 선택할 수있게하려고합니다. 이 모든 것을 데이터베이스에 저장해야합니다.

$('#getInfo').live('click', function() { 
//clear table before search 
    $("#inventoryUpdate tbody tr").remove(); 
    $('#messageInv').html('Please be patient, this might take a minute'); 
$.ajax({ 
    type: "POST", 
    async: true, 
    url: "getInventory.php", 
    dataType: "json", 
    data: ({skuStart: $("#startSkuRange").val(), skuEnd: $("#endSkuRange").val(), processDate: $("#processDate").val(), 
      source: $("#source").val()}), 
    success: function(data){ 
     $('#messageInv').hide(); 
     //console.log(data); 
        var myselectoptions = ''; 
     if(data.isbn2 === null){ 
       $("#inventoryUpdate").append('<tr><td>No Records Found</td></tr>'); 
      }else{ 
     for(var x=0;x<data.isbn2.length;x++) 
       { 
      $.each(data.defect2[x], function(index, val) 
      { 
      myselectoptions += '<option value="'+data.defect2[x][index].option+'">'+data.defect2[x][index].option+'</option>'; 
      }); 
     $("#inventoryUpdate").append('<tr><td id="tableSKU">'+data.sku[x]+'</td><td id="tableISBN">'+data.isbn2[x]+ 
       '</td><td><input type="text" id="tableQuantity" value="'+data.quantity[x]+ 
       '"/></td><td><select id="tableDefect">'+myselectoptions+ 
       '"</select></td><td><input type="text" id="tableSource" value="'+data.source[x]+ 
       '"/></td><td><input type="text" id="tableFeature" value="'+data.feature[x]+ 
       '"/></td><td><input type="text" id="tableLocation" value="'+data.location[x]+ 
       '"/></td><td><input type="text" id="tableProcessDate" value="'+data.processDate[x]+ 
       '"/></td><td><input type="text" id="tableBookType" value="'+data.booktype[x]+ 
       '"/></td><td><input type="text" id="tableCreatedBy" value="'+data.created[x]+ 
       '"/></td><td><input type="text" id="tableModifiedBy" value="'+data.modified[x]+ 
       '"/></td></tr>'); 
            } 
     $("#inventoryUpdate").trigger("update"); 
      } // end of else statement 
    } // end of success function 
});// end of ajax call 
}); // end of inventory update function 

나는 tableDefect 및 tableFeature 입력이 데이터베이스에서 현재 정보에 동적으로 채워진 상자 및 기본 드롭 다운되고 싶은 : 여기에 지금까지 가지고있는 것입니다. 예를 들어, 데이터베이스의 결함이 "립 재킷에 립"으로 선택되어있는 옵션 일 경우 데이터베이스에서 사용할 수있는 나머지 옵션 (결함, 물 손상 등 없음)이 필요합니다. 그것을 바꿀 필요가있다. 입력 유형을 select로 변경해야한다고 생각 하겠지만, 어떻게 입력 할 것인가? 정보를 얻기 위해 데이터베이스를 다시 호출해야합니까? 이 플러그인으로도이 작업을 수행 할 수 있습니까?
편집 : 나는 아래의 답변을 기반으로 새 코드를 붙여 넣은 지금은 19 "옵션"(그것은 단지 실제 값을 반환하지 않은 정의되지 않은 말한다) 첫 번째 레코드에 대한 38 등 두 번째 등 38 19 가지 옵션이 있습니다.

Answer 1

내가 제대로 단지 지금까지 동적으로 몇 가지 방법으로 처리 할 수있는 선택을 채우는 것과 <select id=...><option>...</option></select>

으로 <input type="text"......> 교체를 읽고있다합니다. 아약스를 사용하면 선택 값을 얻을 수 있습니다.

data.defect[x]을 다차원 객체로 변경하는 대신 문자열을 출력하는 대신 백엔드에서 JSON으로 변환 된 객체를 출력하므로 객체가 보입니다. 같은

defect[{"option":"value"},{"option":"value"},{"option":"value"},{"option":"value"}]

어디가 승계 부분에 테이블을 만들 때 당신이하고자하는 객체를 통해 루프. 당신은 본질적으로 당신이 지금하는 것처럼 똑같이 할 것입니다. 귀하의 구체적 요구에 맞게 일부 조정을 필요로

var myselectoptions = ''; 
    $.each(data.defect[x], function(index, val) 
      { 
      myselectoptions += '<option value="'+data.source[x][index].option+'">'+data.source[x][index].option+'</option>'; 
      }); 
'"/></td><td><select id="tableDefect">'+myselectoptions+'.... 

지금이 순수 개념, 나는 그것을 테스트하지 않았습니다되고, 그 가능성과 같을 것이다 선택 그러나 이것은 몇 가지 방법 중 하나의 핵심 개념 당신 당신이하고 싶은 것을 처리 할 수 ​​있습니다. 그것은 현재하고있는 것에 적합합니다. 너무 많이 바꾸지 않아도됩니다.