我一直在尝试制作一个 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>最佳答案
当您创建元素时，您应该向内部表添加一个类，例如 insideTable:
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table class="insideTable">';
// ... the other lines
}
在你的CSS中，你可以在表格内设置它的样式:
.insideTable {
width: 100%;
}
这是您想要实现的目标吗？ Here is a demo plunker .
编辑
将类添加到表后，您可以设置其中每个元素的样式，如下所示:
.insideTable tbody {
text-align: center;
}
关于javascript - 每行内都有一个嵌套表的数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36624596/