javascript - bootstrap-table: how to nest one table into another? -

i'm using bootstrap-table. i'd nest 1 table another.

$(document).ready(function() {    var t = [{      "id": "1",      "name": "john",    }, {      "id": "2",      "name": "ted"    }];        //table 1    $('#summarytable').bootstraptable({      data: t,      detailformatter: detailformatter    });      function detailformatter(index, row, element) {      $(element).html(row.name);      $(element).html(function() {        //i thinking of putting code here, don't know how work,        //except javascript, needs put html code <table id="detailtable"></table>        });          //   return [        //    ].join('');    }      //table 2    var t2 = [{      "id": "1",      "shopping": "bike",    }, {      "id": "2",      "shopping": "car"    }];    $('#detailtable').bootstraptable({      data: t2,      columns: [{        field: 'id',        title: 'id'      }, {        field: 'shopping',        title: 'shopping detail'      }, {        field: 'status',        checkbox: true      }],      checkboxheader: false      });    $('#detailtable').on('check.bs.table', function(e, row, $el) {      alert('check index: ' + row.shopping);    });    $('#detailtable').on('uncheck.bs.table', function(e, row, $el) {      alert('uncheck index: ' + row.shopping);    });    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet"/>  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>        <div class="container">    <p>table 1</p>    <table id="summarytable" data-detail-view="true">      <thead>        <tr>          <th data-field="id" data-align="center" data-width="20px">id</th>          <th data-field="name" data-align="center">name</th>        </tr>      </thead>    </table>    <br>      <p>table 2</p>    <table id="detailtable"></table>    </div>

here link of demo: fiddle

there 2 tables. table 1 has expandable rows , want put table 2 every row of table 1. there function called detailformatter , can return string or render element (i playing it, can't make work). demo table 1 created html code , table 2 uses javascript, there initiating div <table id="detailtable"></table> (it doesn't matter me way done). so, question how put table 2 table 1 possibility of using events (like check or uncheck checkbox) demo shows table2? later on, i'd use event onexpandrow when user expands row of table 1 data database , it'll fill out table 2.

well clone detailtable , put in each row detailformatter below:

function detailformatter(index, row, element) {     $(element).html($('#detailtable').clone(true)); } 

now there duplicate id's created when clone, remove changing id below:

function detailformatter(index, row, element) {      $(element).html($('#detailtable').clone(true).attr('id',"tbl_"+row.id)); } 

also, can hide #detailtable since having append in table , once hide need add show cloned tables properties copied in clone(true) can done below:

function detailformatter(index, row, element) {     $(element).html($('#detailtable').clone(true).attr('id',"tbl_"+row.id).show()); } //..... //..... //..... //at end $("#detailtable").hide(); 

a complete demo