Bootstrap 可编辑表添加动态行答案

【问题标题】：Bootstrap editable table adding dynamic rowsBootstrap 可编辑表添加动态行
【发布时间】：2017-11-15 00:30:19
【问题描述】：

我正在使用可编辑的引导程序来创建动态表。我需要添加新行并自动将值填充到可编辑表中。

现有的“测试”行是可编辑的，而新行没有引导程序可编辑的属性。我将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>')                             
    ) )

 });

值“名称”和“描述”正在添加到表中。但无法编辑。

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

这是来自开发者工具的 html 元素内容。

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案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

【讨论】：