2014-05-19 3 views
0

더블 클릭하면 특정 ID의 td 값을 편집하고 싶습니다. 나는 논리를 썼다. 아래 코드에서 'get()'함수는 테이블 td에 할당 된 10 개의 상태를 반환합니다. 모든 상태를 두 번 클릭하면 적절한 편집 및 저장 기능이 필요합니다. 하지만 왜 작동하지 않는지 모르겠습니다. 제발 도와주세요.두 번 클릭하면 td 값을 편집하는 방법

<html> 
    <head><title></title></head> 
    <body> 
    <div id="body" > 
    </div> 
    </body> 
    </html> 
    <script> 


        $(document).ready(function(){ 

        var table='<table>'; 
         table += '<tr><th style=""> Status</th></tr>'; 
         table += '</table></br>'; 

        $("#body").append(table); 
        var $tbody = $('<tbody>').appendTo('#body table:last'); 
        $.ajax({ 
        type : 'POST', 
        url : '@routes.Application.get()', 
        data : { 
        itemupc : item[0] 
        }, 
        beforeSend:function() 
        { 

        }, 
        success : function(items) { 

        $.each(items, function(j, itemsdetails) { 



       if(itemsdetails[3]=="R") 

        $tbody.append('<tr><td id="my'+itemsdetails[0]+'" class="editableTD">0</td></tr>'); 

             }); 
}  
    }); 
       $("#item_content").on('dblclick','.editableTD',function(e){ //assign event to editableTD class 
        e.stopPropagation(); 
        var currentID=$(this).attr("id"); //grab the current id instead 
        var currentValue= $(this).html(); 
        inlineEditSave(currentID,currentValue); 
       }); 
       function inlineEditSave(currentElement,currentValue) 
        { 
        //$(currentElement).html('<i class="fa-li fa fa-spinner fa-spin"></i>'); 
         $(currentElement).html('<input type="text" class="thVal" value="' + currentValue + '" />'); 
         $(".thVal").focus(); 
         $(".thVal").keyup(function (event) { 
          if (event.keyCode == 13) { 
           $(currentElement).html($(".thVal").val().trim()); 

          } 
         }); 
      $(document).click(function() { 

        $(currentElement).html($(".thVal").val().trim()); 

      }); 
    } 
        }); 

      </script> 
+0

가능한 중복 [ 테이블에 클릭 동작을 바인딩하는 중입니다. td] (http://stackoverflow.com/questions/13262376/trying-to-bind-click-action-on-table-td) – davidcondrey

+0

번호 값은 고유합니다. 어떤 복제본도 없습니다. – user3614760

답변

4

글꼴 굉장하다고 생각하면 부트 스트랩을 사용하고 있다고 가정 할 수 있습니까? 그렇다면 논리를 직접 코딩하는 특별한 이유가 있습니까? 도서관은 당신을 위해 무거운 짐을 모두 처리이라는 X-edtiable에 대한 있습니다 :

http://vitalets.github.io/x-editable/

데모/사용 예는 여기에서 찾을 수 있습니다 :의

http://vitalets.github.io/x-editable/demo-bs3.html

+0

니스. 고맙습니다. 나는 초심자이므로이 사실을 알지 못한다. 내 남자 파워를 줄일 수있는 부트 스트랩 웹 사이트를 알려주시겠습니까 – user3614760

+0

물론, 일부 발췌 문장이 있습니다 : http://bootsnipp.com, 무료 테마 : http://bootswatch.com. angularjs도 사용한다면 이것은 좋은 플러그인입니다 : http://angular-ui.github.io/bootstrap/ –

+0

고마워요. ... – user3614760

관련 문제