인라인 편집 가능한 datatable jquery

Question

안녕하세요 저는 http://www.vandelaydesign.com/inline-edit-with-ajax/ 인라인 편집에 대한이 자습서를 따르려고했습니다. 내 데이터 테이블에 적용하고 싶습니다. 사용자가 편집 버튼을 클릭하면 해당 줄 내의 해당 열이 입력이되지만 그 방법을 전환하는 방법을 모르겠습니다. 튜토리얼에서는 span의 값을 얻기 위해 jquery에서 .prev을 사용하지만 내 경우에는 그렇게하는 법을 모르겠습니다. 이것은 내 테이블과 같은 모습입니다 : 편집 버튼을 클릭하면

카테고리 이름과 내림차순이 입력 될 것이다. 어떻게해야합니까?

<tbody> 
    <?php foreach ($categories as $category) { ?> 
     <tr> 
      <td> <span id="<?= $category->category_id ?>" class="datainfo"> <?= $category->category_name ?> </span> </td> 
      <td> 
       <?= $category->category_desc ?> 
      </td> 
      <td> 
       <?= $category->created_on ?> 
      </td> 
      <td> 
       <?= $category->updated_on ?> 
      </td> 
      <td> 
       <?= $category->status ?> 
      </td> 
      <td> 
       <button type="button" name="edit_cat" class="btn btn-light btn-sm edit_cat"> 
        <!-- data-id="<?= $category->category_id ?>" --> 
        <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 
       </button> 
      </td> 
     </tr> 
     <?php } ?> 
</tbody> 

자바 스크립트 :

나는이 문제를 해결 한 후 향후 교정에 도움이 필요

은 어떻게 어쩌면 스팬 ID를 얻고 거기에서 시작을 저장 가겠어요

$(document).on('click', '.edit_cat', function() { 
     console.log('edit category'); 
     // console.log($(this).data('id')); 
     var dataset = $(this).prev(".datainfo"); 
     console.log(dataset); 
     var theid = dataset.attr("id"); 
     console.log(theid); 
     var newid = theid+"-form"; 
     var currval = dataset.text(); 

     dataset.empty(); 

     $('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset); 

    }); 

?

Answer 1

Datatables는 빌드에서 인라인 편집을 구현합니다.

그것은 편집기에서

인라인 편집이 inline() API 방식의 사용을 통해 활성화되는 자신의 확장으로 설치됩니다. 메서드를 호출하고 편집하려는 셀을 첫 번째 매개 변수로 전달하기 만하면됩니다.

여기에서 더 자세히 살펴 봐야 - https://editor.datatables.net/examples/inline-editing/simple