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 =＆＃39; true＆＃39;属性。（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

Bootstrap可编辑表添加动态行

1 个答案: