ボタンで各セルを編集する方法jqueryデータテーブルをクリック

-5

jquery datatableを使用しています。各行にボタンがあります。今、私はその行のそのボタンをクリックすると、行の各セルを編集可能にしたいと思います。ボタンで各セルを編集する方法jqueryデータテーブルをクリック

2017-05-16 Scott

これまでに試したことはありますか？ –

各行にボタンを追加する – Scott

[mcve] – zer00ne

次のサンプルコードをご覧ください。

<html> 
<head> 
<title></title> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script type="text/javascript"> 
    $('#requestTable tr').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 

    $(document).ready(function() { 
     $("#requestTable tr td").click(function() { 
      alert("Make This td editable :" + jQuery(this).closest('tr').find('.txt').text()); 

     }); 
    }); 
</script> 
</head> 
<body> 
<form> 
    <div> 
     <table class="table" id="requestTable"> 
      <thead class="text-primary"> 
       <th>Column</th> 
       <th>Button</th> 

      </thead> 
      <tbody> 
       <tr class="row"> 
        <td class="txt">@item.interfacename</td> 
        <td>Button 1</td> 
       </tr> 
        <tr class="row"> 

        <td class="txt">@item.interfacename 1</td> 
         <td>Button 2</td> 
       </tr> 
        <tr class="row"> 

        <td class="txt">@item.interfacename 2</td> 
         <td>Button 3</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</form> 
</body> 
<html>

上記のサンプルコードでは、ボタンがクリックされた行に配置されたtdのアラートを表示しています。したがって、必要に応じてこのコードをカスタマイズすることができます。

ご希望の場合はお手数ですが、

出典

2017-05-16 10:45:44 Sunny

ボタンで各セルを編集する方法jqueryデータテーブルをクリック

答えて

関連する問題