データ編集可能なjqueryのインライン編集

Question

こんにちは私はインライン編集http://www.vandelaydesign.com/inline-edit-with-ajax/についてこのチュートリアルに従っています。私は自分のデータテーブルにそれを適用したい。ユーザーが編集ボタンをクリックすると、行内の対応する列が入力になりますが、そのようにする方法はわかりません。チュートリアルでは.prevをjqueryで使用してspanの値を取得しますが、私の場合はその方法を知りません。これは私のテーブルには、次のようになります。編集ボタンをクリックしたときに

カテゴリ名とDESCは、入力になるはず。それ、どうやったら出来るの？

<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> 

Javascriptを：

$(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); 

    }); 

私はまた、私はそれを保存しに行くかどう、この問題を解決した後、将来の校正に役立つかもしれないスパンIDを取得し、そこから起動する必要がありますか？

Answer 1

データシートには、インライン編集の実装が組み込まれています。

それはエディタで

インライン編集がinline() APIメソッドの使用を介して活性化された独自の拡張機能としてインストールされます。メソッドを呼び出して、編集したいセルを最初のパラメータとして渡します。

ここで詳しく見てみましょう - https://editor.datatables.net/examples/inline-editing/simple