Javascript 是否有一种方法总是让引导为我的某些元素创建子行？

以下是我想要做的：

上面的图像显示的正是我想要的，但是我希望它能永久显示，而不仅仅是在某些设备上。本质上，我希望创建一个子行，其中包含1-3条数据。我试图查看DataTable的方法，但是，老实说，Javascript已经超出了我的理解范围

以下是我目前的代码：

<table id="query" class="table table-striped table-bordered table-condensed center-table dt-responsive nowrap" cellspacing="0" width="100%" style="display:none">
    <thead>
        <tr class = "info">
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5 </th>
            <th>Header 6 </th>
            <th>Sub-header 1 </th>
            <th>Sub-header2 </th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Sub Value 1</td>
                <td>Sub Value 2</td>                
            </tr>
        </tbody>
    </table>

标题1
标题2
标题3
标题4
标题5
标题6
副标题1
副校长2
值1
值1
值1
值1
值1
值1
子值1
次级价值2

---

我想要的是当用户单击“+”时始终显示的子标题和子值。我也愿意接受任何其他有助于实现这一目标的建议，即使这是一个指向教程的链接。谢谢。

我想你要找的是引导的折叠元素。 请查看此处以了解它们：

我认为，它们正是你想要的。

我仍然认为这是最好的方法

我试图查看DataTable的方法，但是，老实说，Javascript已经超出了我的理解范围

下面是一个用于假人的数据表方法（）

步骤1：让我们创建一个模板视图，表将包含其中的所有数据

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th> <!-- expand/collapse .details-control header column -->
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

注意这里没有

。这是因为我们将从JavaScript代码生成它。那么，让我们开始吧

第2步：让我们来看看我们的小节

function format ( dataObject ) {
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
      '<tr>'+
          '<td>Full name:</td>'+
          '<td>'+dataObject.name+'</td>'+
      '</tr>'+
      '<tr>'+
          '<td>Extension number:</td>'+
          '<td>'+dataObject.extn+'</td>'+
      '</tr>'+
      '<tr>'+
          '<td>Extra info:</td>'+
          '<td>And any further details here (images etc)...</td>'+
      '</tr>'+
  '</table>';
}

事件侦听器-检查是否显示子节并切换其视图

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
       // This row is already open - close it
       row.child.hide();
       tr.removeClass('shown');
    }
    else {
       // Open this row
       row.child( format(row.data()) ).show();
       tr.addClass('shown');
    }
  });
});

---

感谢您的深入解释，我非常感谢。有一个问题，我目前正在使用SQLite数据库来处理我的数据，这种方法仍然可行吗？我在Python中使用Flask，所以我的所有项目都被传递到此页面。我想我也许可以把数据转换成JSON。@ChadD耶！我认为应该这样。步骤3中的

“ajax”：“./ajax/data/objects.txt”

可以在服务器上调用该python脚本。python脚本完成了所有必须完成的工作，比如查询

db.sqlite

，打包数据，并像

json\u响应一样执行操作。（我做了一点Django，但绝对不认为自己是一个Python家伙）我看到这一点，而我正试图得到这一工作，但显然我失败的失败，在正确设置。我目前有它“工作”，除了它扩展到我的桌子上面，而不是下面。我知道这是因为我没有把它包在一个盒子里，但是包在里面会导致一些不必要的打字错误。我得继续玩下去。
var table = $('#example').DataTable( {
   "ajax": "../ajax/data/objects.txt",
   "columns": [
       {
           "className":      'details-control',
           "orderable":      false,
           "data":           null,
           "defaultContent": ''
       },
       { "data": "name" },
       { "data": "position" },
       { "data": "office" },
       { "data": "salary" }
    ],
    "order": [[1, 'asc']]
 } );

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
       // This row is already open - close it
       row.child.hide();
       tr.removeClass('shown');
    }
    else {
       // Open this row
       row.child( format(row.data()) ).show();
       tr.addClass('shown');
    }
  });
});