从引导表行生成表单

Question

this is my plunk . What I'm trying to do is when user click on row, he will see form on the bottom of page and could correct it. With using jquery .html() I've rendered lower table but how could I set input form for that?

this is my code:

$(function () {

   $("#button").click(function () {
  $('#table').bootstrapTable('refreshOptions', {
                data: data,
                detailView: false,
                filterControl: true,
                columns: [
                    {
                        field: 'name',
                        title: 'Name',
                        sortable: true,
                        editable: true,
                        filterControl: 'input'
                    }, {
                        field: 'stargazers_count',
                        title: 'Structure',
                        sortable: true,
                        editable: true,
                         filterControl: 'input'
                    }, {
                        field: 'forks_count',
                        title: 'Class',
                        sortable: true,
                        editable: true,
                         filterControl: 'input'
                    }, {
                        field: 'description',
                        title: 'Description',
                        sortable: true,
                        editable: true,
                         filterControl: 'input'
                    }
                ]
            });
    });


    $('#table').bootstrapTable({
       detailView: true,
        formatNoMatches: function () {
            return "This table is empty...";
        },

         onClickCell: function(field, value, row, $element) {
                        if (field == 'name') {
                            $element.parent('tr').find('>td>.detail-icon').click();
                             // NOTE: needs index to call to expandRow
                             var $tr = $element.parent('tr');
                             // NOTE: literally first google result: http://stackoverflow.com/questions/469883/how-to-find-the-index-of-a-row-in-a-table-using-jquery
                             var index = $("> tr",  $('#table').find('> tbody')).index($tr);
                             $('#table').bootstrapTable('expandRow',index);
                        }
                    },
      onExpandRow: function(index, row, $detail) {
      // console.log(row)
      $detail.html('<table></table>').find('table').bootstrapTable({
        columns: [{
          field: 'id',
          title: 'id'
        }, {
          field: 'status',
          title: 'stat'
        }, {
          field: 'date',
          title: 'date'
        }],
        data: row.children,
        // Simple contextual, assumes all entries have further nesting
        // Just shows example of how you might differentiate some rows, though also remember row class and similar possible flags
      });
}
});
});

$(function () {
    var $result = $('#form');
    $('#table').on('click-row.bs.table', function (e, row, $element) {

        $('.success').removeClass('success');
        $($element).addClass('success');
        function getSelectedRow() {
            var index = $('#table').find('tr.success').data('index');
            return $('#table').bootstrapTable('getData')[index];
        }
        $result.html(
            '<table border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
            '<tr  align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td>&nbsp;</td>' + '<td>' + getSelectedRow().name + '</td>' + '</tr>' +
            '<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>'  + '<td>&nbsp;</td>' +  '<td>' + getSelectedRow().stargazers_count + '</td>'+ '</tr>'+
            '<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td>&nbsp;</td>' +  '<td>' + getSelectedRow().forks_count + '</td>'+ '</tr>'+
            '<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td>&nbsp;</td>' +  '<td>' + getSelectedRow().description + '</td>'+ '</tr>'+
            '</h3>' + '</table>'
        );
    });
});

html

 <body>
    <h3>Click on row that to see results</h3>
<div id="toolbar">
  <button id="button" class="btn-primary btn">Load Table</button>
                        </div>
                        <table id="table"
                               data-toolbar="#toolbar"
                               data-search="true"
                               data-editable="false"
                               data-show-refresh="false"
                               data-show-toggle="false"
                               data-show-columns="true"
                               data-show-export="true"
                               data-detail-view="true"
                               data-detail-formatter="detailFormatter"
                               data-minimum-count-columns="2"
                               data-id-field="text"
                               data-response-handler="responseHandler"
                               data-field="operate"
                               data-events="operateEvents"
                               data-formatter="operateFormatter"
                               data-filter-control="true"
                               data-unique-id="id">
                        </table>
                        <div id="form"></div>
                          </body>

Answer 1

You have to change the HTML you place in the $result variable so instead of just showing the data, you place input controls to make it editable.

Also, you need to place a "save changes" button along with the form so you can save the changes made to the form data, either to the server o to your client-side data repository.

Edited plunk