Bootstrap editable table adding dynamic rows

Question

I am working with bootstrap editable to create a dynamic table. I need to add new row and automatically populate the values into the editable table.

The existing rows 'Test' are editable whereas , the new rows does not have the bootstrap editable properties. I am using bootstrap-table-editable.js for the editable table.

Table 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>')                             
    ) )

 });

The values 'name' and 'description' are getting added to the table. But it cannot be edited.

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

This is the html element contents from developer tools.

Mr. Aniket · Answer 1 · 2017-11-14T16:30:19.687

Use contenteditable='true' attribute. (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 editable table adding dynamic rows

1 Answers1