这是我第一次询问，如果我的询问方式有问题，我会事先道歉。
嗯，事情如下： 我正在做一个表的响应式设计。这张表是用tinytable完成的。 所以这里的问题是每当我为响应式设计调整表的大小时，它会破坏tinytable的所有功能（无法搜索等） - picture of the table with responsive design new structure and broken tinytable functionality -
我正在使用javascript调整表格，并使用以下代码（我希望它可以提供帮助）：
/**
*This .js splits/rezises a table given into a desiderable structure
*/
/**
*Function that splits rows according to what you need
*/
function splitRow(rowOrig, tam_row, tam_col, col1, col2) {
var row = rowOrig.clone();
var cell = row.find('td');
/**
*Setting mode of the table's rows by default to 'simple'
*/
rowOrig.attr({
"modo": 'simple'
});
/**
* New rows with the new structure
*/
var tr1 = new jQuery("<tr/>", {"modo": 'doble'});
var tr2 = new jQuery("<tr/>", {"modo": 'doble'});
/**
*Modifying columns that are required
*/
//Date Column
var cellToModify1 = new jQuery("<td/>", {"rowspan": tam_row});
var cellAux2 = jQuery(cell.get(col1 - 1));
cellToModify1.append(cellAux2.contents());
tr1.append(cellToModify1);
//Details Column
var cellToModify2 = new jQuery("<td/>", {"colspan": tam_col});
var cellAux3 = jQuery(cell.get(col2 - 1));
cellToModify2.append(cellAux3.contents());
tr1.append(cellToModify2);
/**
*Removing columns not needed
*/
cell.splice(col1 - 1, 1);
cell.splice(col2 - 2, 1);
/**
*Adding content of the rest of the columns
*/
for (var j = 0; j < cell.length; j++) {
var cell_aux = jQuery(cell.get(j));
var cell_td = new jQuery("<td/>", {});
cell_td.append(cell_aux.contents());
tr2.append(cell_td);
}
/**
*Replacing rows
*/
tr1.insertAfter(rowOrig);
tr2.insertAfter(tr1);
}
function partir(){
var modoDoble = jQuery("#cabLineasCaja tr[modo='doble']:visible").length > 0;
if (modoDoble) {
jQuery(window).unbind("resize", partir);
var nColumns = jQuery('#bodyRowsCaja tr:first td').length;
jQuery('#bodyRowsCaja tr').each(function(i, rRow) {
splitRow(jQuery(rRow), 2, nColumns - 2, 1, 6);
});
}
}
/**
* Documento cargado/Document loaded
*/
jQuery(document).ready(function() {
jQuery(window).bind("resize", partir);
partir();
});
html就是这样：
<div id="tablacaja" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" class="tinytable" id="tCaja">
<thead id="cabLineasCaja">
<tr modo="simple">
<th><h3><?php echo _("Fecha") ?></h3></th>
<th><h3><?php echo _("Tipo") ?></h3></th>
<th><h3><?php echo _("Forma") ?></h3></th>
<th><h3><?php echo _("Nº Fac.") ?></h3></th>
<th><h3><?php echo _("Nº Rec.") ?></h3></th>
<th><h3><?php echo _("Detalles") ?></h3></th>
<th><h3><?php echo _("Importe") ?></h3></th>
<th><h3><?php echo _("Acciones") ?></h3></th>
</tr>
<tr modo="doble">
<th rowspan="2"><h3><?php echo _("Fecha") ?></h3></th>
<th colspan="6"><h3><?php echo _("Detalles") ?></h3></th>
</tr>
<tr modo="doble">
<th><h3><?php echo _("Tipo") ?></h3></th>
<th><h3><?php echo _("Forma") ?></h3></th>
<th><h3><?php echo _("Nº Fac.") ?></h3></th>
<th><h3><?php echo _("Nº Rec.") ?></h3></th>
<th><h3><?php echo _("Importe") ?></h3></th>
<th><h3><?php echo _("Acciones") ?></h3></th>
</tr>
</thead>
<tbody id="bodyRowsCaja">
<?php
$formas = explode("@", $forma);
$formaBusqueda = $formas[0];
if($formas[1]){
$idListadoBusqueda = $formas[1];
}else{
$idListadoBusqueda = 0;
}
$lista = $capunte->listarApuntes($uActual->getIdEmpresa(), $fini, $ffin, $tipo, $formaBusqueda, -1, $filtroUsuario, $idListadoBusqueda);
$total_efectivo = 0;
$total_tarjeta = 0;
$total_talon = 0;
$gastos_efectivo = 0;
$gastos_tarjeta = 0;
$gastos_talon = 0;
if (!$lista) {
?>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td id="detallesColumn" > </td>
<td > </td>
<td id="hideColumn"> </td>
<?php
} else {
$cuenta = 0;
foreach ($lista as $apunte) {
if ($agenda < 0 || ($agenda == 0 && $apunte->getIdAgenda() <= 0 ) || ($agenda > 0 && $apunte->getIdAgenda() == $agenda )) {
$cuenta++;
if ($apunte->getTipo() == 1 && $apunte->getForma() == 1) {
$total_efectivo += $apunte->getImporte();
}
if ($apunte->getTipo() == 1 && $apunte->getForma() == 2) {
$total_tarjeta += $apunte->getImporte();
}
if ($apunte->getTipo() == 1 && $apunte->getForma() == 3) {
$total_talon += $apunte->getImporte();
}
if ($apunte->getTipo() == 2 && $apunte->getForma() == 1) {
$gastos_efectivo += $apunte->getImporte();
}
if ($apunte->getTipo() == 2 && $apunte->getForma() == 2) {
$gastos_tarjeta += $apunte->getImporte();
}
if ($apunte->getTipo() == 2 && $apunte->getForma() == 3) {
$gastos_talon += $apunte->getImporte();
}
?>
<tr>
<td ><?php echo $apunte->getFechaInterfaz(); ?></td>
<td ><?php
switch ($apunte->getTipo()) {
case 0: echo _("Anulado");
break;
case 1: echo _("Ingreso");
break;
case 2: echo _("Gasto");
break;
}
?></td>
<td ><?php
switch ($apunte->getForma()) {
case 1: echo _("Efectivo");
break;
case 2: echo _("Tarjeta");
break;
case 3:
if ($apunte->getIdListado() > 0) {
$tipoList = $clistado->obtenerListado($apunte->getIdListado(), $uActual->getIdEmpresa());
if ($tipoList && $tipoList->getId() > 0) {
echo $tipoList->getValor()."*";
} else {
echo _("Talón/Transf.");
}
} else {
echo _("Talón/Transf.");
}
break;
}
?></td>
<td ><?php
if ($apunte->getIdFactura() > 0)
echo '<a href="./facturas-ficha.php?ficha=' . $apunte->getIdFactura() . '">' . '<span style="color:#0000FF;">';
$factura = $apunte->getNFactura();
if ($apunte->getTipoApunte() == 3) {
if ($apunte->getidContacto() == -1)
echo '<a href="./caja-provee-av.php?ficha=' . $apunte->getId() . '">' . '<span style="color:#0000FF;">';
else
echo '<a href="./caja-provee.php?ficha=' . $apunte->getId() . '">' . '<span style="color:#0000FF;">';
}else
if ($cfactura->isCIF($uActual->getIdEmpresa(), 1)) {
if ($apunte->getIdFactura() > 0) {
$fac = new Factura();
$fac = $cfactura->obtenerFactura($apunte->getIdFactura(), $uActual->getIdEmpresa());
if ($fac->getIdRosa() != 0)
$factura = "CIF2/" . $factura;
}
}
echo $factura;
if ($apunte->getIdFactura() > 0 || ($apunte->getTipoApunte() == 3 && $apunte->getTipo() == 2))
echo '</span>' . '</a>';
?>
</td>
<td ><?php
if ($apunte->getIdRecibo() > 0)
echo '<a href="./facturas-ficha.php?ficha=' . $apunte->getIdRecibo() . '">' . '<span style="color:#0000FF;">';
$recibo = $apunte->getNRecibo();
if ($cfactura->isCIF($uActual->getIdEmpresa(), 1)) {
if ($apunte->getIdRecibo() > 0) {
$rec = new Factura();
$rec = $cfactura->obtenerFactura($apunte->getIdRecibo(), $uActual->getIdEmpresa());
if ($rec->getIdRosa() != 0)
$recibo = "CIF2/" . $recibo;
}
}
echo $recibo;
if ($apunte->getIdRecibo() > 0)
echo '</span>' . '</a>';
?> </td>
<td id="hideDetalles">
<?php
echo $apunte->getDetalles();
if ($apunte->getIdAgenda() > 0) {
$ag = $cagenda->obtenerAgenda($apunte->getIdAgenda(), $uActual->getIdEmpresa());
echo "<br />" . _("AGENDA") . ": " . $ag->getNombreAgenda();
}
?></td>
<td ><?php echo $apunte->getImporte(); ?></td>
<td ><div class="centro">
<?php
if ($apunte->getTipo() > 0) {
if ($apunte->getIdFactura() == "" || $apunte->getIdFactura() <= 0) {
?>
<a onclick="abrirDialogo(<?php echo $apunte->getId() ?>)" title="Anular" target="demo-frame" class="acciones"><img src="_dt/img/acciones/delete.png" alt="Anular" title="Anular" width="20" height="20" /></a>
<?php
}
}
?>
</div></td>
</tr>
<?php
}
}
if ($cuenta <= 0)
echo '<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td >0</td>
<td > </td>';
}
?>
</tbody>
在css中，我基本上用它来控制它（它有更多的代码，但我认为不需要放入所有代码）：
tr[modo='simple']
{
display:none;
}
tr[modo='doble']
{
display:table-row;
}
我想找到的是关于如何解决这个问题的一些想法。 我想过可能从微型表中获取信息并将其转移到另一个表中。一个正常的，能够按我想要的方式调整大小。
提前致谢！
祝你好运