Javascript 带有嵌套表的Datatable不'；我没有功能
这个html文件的主要功能是包含一个主数据表，每当我点击一行时，它都会向我显示一个与该行相关的数据的详细表，但我有一些问题。首先，我创建为datatable的主表与datatable的功能不兼容，只是与普通表的功能兼容。其次，每当我单击行以显示details表时，它只显示在主表的第一列中。任何帮助都将不胜感激Javascript 带有嵌套表的Datatable不'；我没有功能,javascript,jquery,html,css,datatables,Javascript,Jquery,Html,Css,Datatables,这个html文件的主要功能是包含一个主数据表，每当我点击一行时，它都会向我显示一个与该行相关的数据的详细表，但我有一些问题。首先，我创建为datatable的主表与datatable的功能不兼容，只是与普通表的功能兼容。其次，每当我单击行以显示details表时，它只显示在主表的第一列中。任何帮助都将不胜感激 <html> <head> <script src="https://code.jquery.com/jquery-1.12.0.min.js
<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/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.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/responsive/2.0.2/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="icon" href="./resources/logo.jpg">
<script>
$(document).ready(function() {
var oTable = $('#maintable').dataTable( {
"aoColumnDefs": [
{ "bSortable": true, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"language": {
"lengthMenu": "Mostrar _MENU_ datos por pagina.",
"zeroRecords": "Nada fue encontrado.",
"info": "Mostrando _PAGE_ de _PAGES_",
"infoEmpty": "No hay datos disponibles",
"infoFiltered": "(filtrado de _MAX_ datos totales)",
"search": "Buscar:",
"paginate": {
"first": "Primero",
"last": "Ultimo",
"next": "Proximo",
"previous": "Previo"
}
}
});
});
</script>
<title>Consulta de facturas atrasadas</title>
<style type="text/css">
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; width: 100%;}
#footer { background:#fff; width: 100%;}
#footer-inner { margin:auto; text-align:center; padding:12px;}
#footer a {color:blue;text-decoration:none;}
#maintable {
text-align: center;
}
.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 {
}
#container {
width:90%;
margin: 0 auto;
}
#titulo {
margin: 0 auto;
}
div.slider {
display: none;
}
table.dataTable tbody td.no-padding {
padding: 0;
}
th {
text-align: center;
}
.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;}
</style>
</head>
<body>
<br>
<div id="page">
<header id="header">
<div id="header-inner">
<div id="logo">
</div>
<div id="titulo">
<h2>Consulta de facturas atrasadas</h2>
</div>
<div class="clr"></div>
</div>
</header>
<br>
<div id="container">
<table id="maintable" class="row-border hover order-column display table table-striped" cellspacing="0" width="100%" style="border-collapse:collapse;">
<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>
<tbody>
<tr data-toggle="collapse" data-target="#1" class="accordion-toggle">
<td>Codigo</td>
<td>2011/02/02</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 class="hiddenRow"><div class="accordian-body collapse" id="1">
<table id="a" class="table table-striped" style="width:100%; text-align: center">
<thead>
<tr>
<th>Factura</th>
<th>Fecha</th>
<th>Dias</th>
<th>Monto</th>
<th>Pendiente</th>
<th>Vendedor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Factura</td>
<td>2015/04/15</td>
<td>Factura</td>
<td>Factura</td>
<td>Factura</td>
<td>Factura</td>
</tr>
<tr>
<td>Factura</td>
<td>2011/04/15</td>
<td>Factura</td>
<td>Factura</td>
<td>Factura</td>
<td>Factura</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#2" class="accordion-toggle">
<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 class="hiddenRow"><div class="accordian-body collapse" id="2">
<table id="b" class="table table-striped" style="width:100%; text-align: center">
<thead>
<tr>
<th>Factura</th>
<th>Fecha</th>
<th>Dias</th>
<th>Monto</th>
<th>Pendiente</th>
<th>Vendedor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Factura</td>
<td>2012/04/15</td>
<td>Factura</td>
<td>Factura</td>
<td>Factura</td>
<td>Factura</td>
</tr>
<tr>
<td>Factura</td>
<td>2011/04/15</td>
<td>Factura</td>
<td>Factura</td>
<td>Factura</td>
<td>Factura</td>
</tr>
</tbody>
</table>
</div>
</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>2011/02/02</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>
<script>
var table = document.getElementById("a");
for(var i = 0; i < table.rows.length; i ++) {
var d = new Date(table.rows[i].cells[1].innerHTML).getTime();
var difference = new Date().getTime();
console.log(((difference - d)/86400000) > 100);
if(((difference - d)/86400000) > 1000)
table.rows[i].style.background = "red";
}
</script>
<div class="clr"></div>
<footer id="footer">
<div id="footerblurb">
<br>
</div>
<div id="footer-inner">
<div class="clr"></div>
</div>
</footer>
</div>
</body>
$（文档）.ready（函数（）{
var oTable=$（'#maintable'）。数据表（{
“aoColumnDefs”：[
{“bSortable”：true，“ataargets”：[0]}
],
“aaSorting”：[[1，‘asc']]，
“语言”：{
“长度菜单”：“莫斯特拉尔菜单”，
“zeroRecords”：“Nada fue encontrado.”，
“信息”：“Mostrando页面”，
“infoEmpty”：“无hay datos争议”，
“信息过滤”：“过滤数据总计”，
“搜索”：“客车：”，
“分页”：{
“第一”：“Primero”，
“最后一个”：“最后一个”，
“下一步”：“Proximo”，
“以前的”：“以前的”
}
}
});
});
阿特拉萨达斯工厂领事馆
html，#第{页填充：0；页边距：0；}
正文{margin:0；padding:0；width:100%；color:#9595；font:normal 12px/2.0em Sans Serif；}
h1，h2，h3，h4，h5，h6{颜色：暗蓝色；文本对齐：中心；}
#第{页背景：#fff；}
#页眉，#页脚{边距：0；填充：0；}
#徽标{填充：0；宽度：自动；文本对齐：中心；边距：自动；}
#标题{背景：#fff；}
#标题内部{边距：0自动；填充：0；}
#页脚模糊{背景：#d3d3f9；颜色：蓝色；宽度：100%；}
#页脚{背景：#fff；宽度：100%；}
#页脚内部{页边距：自动；文本对齐：居中；填充：12px；}
#页脚a{颜色：蓝色；文本装饰：无；}
#主表{
文本对齐：居中；
}
希登罗先生{
填充：0！重要；
}
#事件{
边缘底部：1米；
填充：1em；
背景色：#f6f6f6；
边框：1px实心#999；
边界半径：3px；
高度：100px；
溢出：自动；
}
高光{
背景色：白烟！重要；
}
.详情管制{
}
#容器{
宽度：90%；
保证金：0自动；
}
#提特罗{
保证金：0自动；
}
分区滑块{
显示：无；
}
table.dataTable tbody td.no-padding{
填充：0；
}
th{
文本对齐：居中；
}
.bodycontainer{最大高度：450px；宽度：100%；边距：0；溢出-y:自动；}
#col-lg-6{
保证金：自动；
}
#公式{
保证金：自动；
列宽：80%；
}
.clr{clear:both；padding:0；margin:0；width:100%；font size:0px；line height:0px；}
阿特拉萨达斯工厂领事馆
科迪戈
名义
丙级
指令
城市
部门
塞杜拉
电话1
电话2
塞勒尔
科迪戈
2011/02/02
丙级
指令
城市
部门
塞杜拉
电话1
电话2
塞勒尔
Factura
费查
迪亚斯
蒙托
悬垂
卖方
Factura
2015/04/15
Factura
Factura
Factura
Factura
Factura
2011/04/15
Factura
Factura
Factura
Factura
科迪戈
名义
丙级
指令
城市
部门
塞杜拉
电话1
电话2