動的行を追加するブートストラップ編集可能テーブル

Question

私は動的テーブルを作成するために編集可能なブートストラップを使用しています。 新しい行を追加して、その値を編集可能なテーブルに自動的に入力する必要があります。

既存の行 'Test'は編集可能ですが、新しい行には編集可能なブートストラッププロパティがありません。 編集可能なテーブルにbootstrap-table-editable.jsを使用しています。

表のHTML

   <table id="rules_table" 
         data-toggle="table"> 
         <thead> 
         <tr> 
          <th data-editable="true" data-field="name" >Name</th> 
          <th data-editable="true" data-field="desc">Description</th> 
         </tr> 
         </thead> 

         <tr> 
         <td>Test</td> 
         <td>Test</td>              
         </tr> 
       </table> 

jQueryの

$('#add_rule').click(function() 

{ 
    var name = $('#name').val() 
    var desc= $('input[name=desc]:checked').val(); 

    $("#rules_table") 
    .append($('<tr>') 
    .append($('<td>') 
      .text(rule_name) 
      .append($('</td>')) 
     ) 
     .append($('<td>') 
      .text(rule_name) 
      .append($('</td>')) 
     ) 

     .append($('</tr>')        
    )) 

}); 

値の 'name' と '説明' テーブルに追加取得しています。しかし、編集することはできません。

<a href="javascript:void(0)" data-name="name" data-pk="undefined" data-value="Test" class="editable editable-click">Test</a> 

これは開発者ツールのHTML要素の内容です。

Answer 1

contenteditable = 'true'属性を使用します。 （HTML5）

$('#add_rule').click(function() 

{ 



    $("#rules_table") 
    .append($('<tr>') 
    .append($('<td contenteditable>') 
      .text("rule_name") 
      .append($('</td>')) 
     ) 
     .append($('<td contenteditable>') 
      .text("rule_name") 
      .append($('</td>')) 
     ) 

     .append($('</tr>')        
    )) 

}); 


    <button id="add_rule"> 
add</button> 
</button> 

    <table id="rules_table" 
          data-toggle="table"> 
          <thead> 
          <tr> 
           <th data-editable="true" data-field="name" >Name</th> 
           <th data-editable="true" data-field="desc">Description</th> 
          </tr> 
          </thead> 

          <tr> 
          <td>Test</td> 
          <td>Test</td>              
          </tr> 
        </table> 

Take help from this link