数据表每行内都有一个嵌套表

Question

I've been trying to do an HTML document that uses a datatable with every row containing an inside row with an another table detailing more info about the row, but I've been running into issues with the formatting and the functionality of the inside row (it just keeps stuck in the left side with out styling). 我一直在尝试制作一个HTML文档，该文档使用一个数据表，每一行都包含一个内部行，另一个表详细说明了该行的更多信息，但是我一直在遇到内部行的格式和功能问题（它只是停留在左侧，没有样式）。

 /* Formating function for row details */ function fnFormatDetails(oTable, nTr) { var aData = oTable.fnGetData(nTr); var sOut = '<table>'; sOut += '<thead> <tr> <th>Factura</th> <th>Fecha</th> <th>Dias</th> <th>Monto</th> <th>Pendiente</th> <th>Vendedor</th> </tr></thead>'; sOut += '<tbody> <tr> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> </tr> </tbody> '; sOut += '</table>'; return sOut; } $(document).ready(function() { /* * Insert a 'details' column to the table */ var nCloneTh = document.createElement('th'); var nCloneTd = document.createElement('td'); nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">'; nCloneTd.className = "center"; $('#example thead tr').each(function() { this.insertBefore(nCloneTh, this.childNodes[0]); }); $('#example tbody tr').each(function() { this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]); }); /* * Initialse DataTables, with no sorting on the 'details' column */ var oTable = $('#example').dataTable({ "aoColumnDefs": [{ "bSortable": false, "aTargets": [0] }], "aaSorting": [ [1, 'asc'] ] }); /* Add event listener for opening and closing details * Note that the indicator for showing which row is open is not controlled by DataTables, * rather it is done here */ $('#example tbody td img').on('click', function() { var nTr = $(this).parents('tr')[0]; if (oTable.fnIsOpen(nTr)) { /* This row is already open - close it */ this.src = "./resources/details_open.png"; oTable.fnClose(nTr); } else { /* Open this row */ this.src = "./resources/details_close.png"; oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); } }); });

 html, #page { padding: 0; margin: 0; } body { margin: 0; padding: 0; width: 100%; color: #959595; font: normal 12px/2.0em Sans-Serif; } h1, h2, h3, h4, h5, h6 { color: darkblue; text-align: center; } #page { background: #fff; } #header, #footer { margin: 0; padding: 0; } #logo { padding: 0; width: auto; text-align: center; margin: auto; } #header { background: #fff; } #header-inner { margin: 0 auto; padding: 0; } #footerblurb { background: #d3d3f9; color: blue; } #footer { background: #fff; } #footer-inner { margin: auto; text-align: center; padding: 12px; } #footer a { color: blue; text-decoration: none; } .hiddenRow { padding: 0 !important; } #events { margin-bottom: 1em; padding: 1em; background-color: #f6f6f6; border: 1px solid #999; border-radius: 3px; height: 100px; overflow: auto; } td.highlight { background-color: whitesmoke !important; } .details-control { cursor: pointer; } div.slider { display: none; } table.dataTable tbody td.no-padding { padding: 0; } .bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; } #col-lg-6 { margin: auto; } #formulario { margin: auto; column-width: 80%; } .clr { clear: both; padding: 0; margin: 0; width: 100%; font-size: 0px; line-height: 0px; }

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css"> <title>Consulta de facturas atrasadas</title> </head> <body> <br> <div id="page"> <header id="header"> <div id="header-inner"> <div id="logo"> <h1></h1> </div> <div class="clr"></div> </div> </header> <br> <table id="example" class="row-border hover order-column display" cellspacing="0" width="90%"> <thead> <tr> <th>Codigo</th> <th>Nombre</th> <th>Propietario</th> <th>Direccion</th> <th>Ciudad</th> <th>Sector</th> <th>Cedula</th> <th>Tel. 1</th> <th>Tel. 2</th> <th>Celular</th> </tr> </thead> <tfoot> <tr> <th>Codigo</th> <th>Nombre</th> <th>Propietario</th> <th>Direccion</th> <th>Ciudad</th> <th>Sector</th> <th>Cedula</th> <th>Tel. 1</th> <th>Tel. 2</th> <th>Celular</th> </tr> </tfoot> <tbody> <tr> <td>Codigo</td> <td>Nombre</td> <td>Propietario</td> <td>Direccion</td> <td>Ciudad</td> <td>Sector</td> <td>Cedula</td> <td>Tel. 1</td> <td>Tel. 2</td> <td>Celular</td> </tr> <tr> <td>Codigo</td> <td>Nombre</td> <td>Propietario</td> <td>Direccion</td> <td>Ciudad</td> <td>Sector</td> <td>Cedula</td> <td>Tel. 1</td> <td>Tel. 2</td> <td>Celular</td> </tr> <tr> <td>Codigo</td> <td>Nombre</td> <td>Propietario</td> <td>Direccion</td> <td>Ciudad</td> <td>Sector</td> <td>Cedula</td> <td>Tel. 1</td> <td>Tel. 2</td> <td>Celular</td> </tr> <tr> <td>Codigo</td> <td>Nombre</td> <td>Propietario</td> <td>Direccion</td> <td>Ciudad</td> <td>Sector</td> <td>Cedula</td> <td>Tel. 1</td> <td>Tel. 2</td> <td>Celular</td> </tr> <tr> <td>Codigo</td> <td>Nombre</td> <td>Propietario</td> <td>Direccion</td> <td>Ciudad</td> <td>Sector</td> <td>Cedula</td> <td>Tel. 1</td> <td>Tel. 2</td> <td>Celular</td> </tr> </tbody> </table> <div class="clr"></div> <div id="footerblurb"> <br> </div> <footer id="footer"> <div id="footer-inner"> <p></p> <div class="clr"></div> </div> </footer> </div> </body> </html>

Answer 1

You should add a class to the inside table when you create the element like insideTable : 创建诸如insideTable类的元素时，应该向内部表添加一个类：

function fnFormatDetails(oTable, nTr) {
  var aData = oTable.fnGetData(nTr);
  var sOut = '<table class="insideTable">';
  // ... the other lines
}

And in your css, you can style this inside table: 在CSS中，您可以在表格内部设置样式：

.insideTable {
  width: 100%;
}

Is this what you were trying to achieve ? 这是您要达到的目标吗？ Here is a demo plunker . 这是一个演示小伙子。

Edit 编辑

After adding the class to the table you can style each element inside like: 在将类添加到表之后，您可以像这样对每个元素进行样式设置：

.insideTable tbody {
  text-align: center;
}

数据表每行内都有一个嵌套表

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-04-14 13:36:32

数据表每行内都有一个嵌套表

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-04-14 13:36:32

解决方案1
3 已采纳 2016-04-14 13:36:32