Bootstrap可编辑表格添加动态行

Question

我正在使用bootstrap editable创建一个动态表。我需要添加新行，并自动将值填充到可编辑的表中。

现有行“Test”是可编辑的，而新行没有bootstrap可编辑属性。我对可编辑的表使用了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‘和'description’将被添加到表中。但不能编辑。

<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