Em uma tabela HTML básica contendo linhas filho, como expandir e recolher a linha pai ao clicar em '+'.
Abaixo está o script que eu tentei, onde OnClick de '+' nada acontece apenas o suspiro muda de '+' para '-' e também as linhas filhas são renderizadas diretamente, o que deveria ter sido ocultado quando estava no modo de recolhimento. Estou obtendo esses dados da tabela de linha filho do meu banco de dados usando PHP. Em anexo estão os dados do código PHP, do script e do banco de dados.
A mesma solução pode ser aplicada em uma tabela de dados?
Código PHP:
<?Php
echo "<table>";
echo "<thead>
<tr>
<th rowspan='2'></th>
<th rowspan='2'>Departmental Activity</th>
<th rowspan='2'>Complete<br>Report</th>
</tr>
</thead>";
$count="SELECT id,department,authority FROM department";
foreach ($dbo->query($count) as $row)
{
$sid='s'.$row['id'];
echo "<tr >
<td style='width:25px'>
<div id='$sid' style='display:inline;width:25px' onclick=display_detail($row[id])>
+
</div>
</td>
<td>$row[department]</td>
<td></td>
</tr>";
echo "<div style='display:none' id=$row[id]>
<tr >
<td></td>
<td><b>id</b> : $row[id]</td>
<td><b>Abb. </b>: $row[authority]</td>
</tr>
<tr >
<td></td>
<td>2</td>
<td>3</td>
</tr>
</div>";
}
echo "</table>";
?>
JS:
<script language="JavaScript">
function display_detail(id){
var sid='s'+id;
if( document.getElementById(id).style.display == 'inline' ){
document.getElementById(id).style.display = 'none'; // Hide the details div
document.getElementById(sid).innerHTML = '+'; // Change the symbol to +
}else {
document.getElementById(id).style.backgroundColor = '#ffff00'; // Add different color to background
document.getElementById(id).style.display = 'inline'; // show the details
document.getElementById(sid).innerHTML = '-'; //Change the symbol to -
} // end of if else
} // end of function
</script>
Dados do banco de dados MySQL:
--
-- Database: `finalcms`
--
-- --------------------------------------------------------
--
-- Table structure for table `department`
--
CREATE TABLE `department` (
`id` int(11) NOT NULL,
`department` varchar(255) NOT NULL,
`authority` varchar(255) NOT NULL,
`status` int(1) NOT NULL DEFAULT '1',
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `department`
--
INSERT INTO `department` (`id`, `department`, `authority`, `status`) VALUES
(35, 'Account', 'ACC', 1),
(36, 'Development', 'DEG', 1),
(37, 'Dispatch', 'DSP', 1);
Esperando que os dados filho sejam exibidos apenas ao clicar ou expandir e ocultos quando recolhidos.
Se você pudesse usar a biblioteca de front end como jQuery em vez de JavaScript simples, você pode reduzir as linhas de script.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<style type="text/css">
table.blueTable {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 21px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
border-left: none;
}
table.blueTable tbody tr.child {
display: none;
background: #D0E4F5;
}
</style>
<?php
$dbo = null;
try {
$dbo = new PDO('mysql:dbname=finalcms;host=localhost', 'root', '');
} catch (PDOException $ex) {
echo 'Connection failed: ' . $ex->getMessage();
}
echo "<table class=blueTable>";
echo "<thead>
<tr>
<th rowspan='2'></th>
<th rowspan='2'>Departmental Activity</th>
<th rowspan='2'>Complete<br>Report</th>
</tr>
</thead><tbody>";
$count="SELECT id,department,authority FROM department";
foreach ($dbo->query($count) as $row)
{
$sid='s'.$row['id'];
echo "<tr>
<td style='width:25px; text-align: center;'>
<div class='sidbutton' id='$sid' style='display:inline;width:25px' onclick=display_detail($row[id])>+</div>
</td>
<td>$row[department]</td>
<td></td>
</tr>";
echo "<tr class='child ".$sid."child'>
<td> </td>
<td><b>id</b> : $row[id]</td>
<td><b>Abb. </b>: $row[authority]</td>
</tr>
<tr class='child ".$sid."child'>
<td> </td>
<td>2</td>
<td>3</td>
</tr>";
}
echo "</tbody></table>";
?>
<script language="JavaScript">
function display_detail(id){
var sid='s'+id;
var sidbuttons = document.getElementsByClassName('sidbutton');
for(i = 0; i < sidbuttons.length; i++) {
if(sidbuttons[i].id == sid){
if(sidbuttons[i].classList.contains('bopen')){
sidbuttons[i].innerHTML = '+';
sidbuttons[i].classList.remove('bopen');
}else{
sidbuttons[i].innerHTML = '-';
sidbuttons[i].classList.add('bopen');
}
}else{
if(!sidbuttons[i].classList.contains('bopen'))
sidbuttons[i].innerHTML = '+';
}
}
var childrows = document.getElementsByClassName('child');
for(i = 0; i < childrows.length; i++) {
if(childrows[i].classList.contains(sid+'child')){
if( childrows[i].classList.contains('copen') ){
childrows[i].style.display = 'none';
childrows[i].classList.remove('copen');
}
else{
childrows[i].style.display = 'table-row';
childrows[i].classList.add('copen');
}
}else{
if(!childrows[i].classList.contains('copen'))
childrows[i].style.display = 'none';
}
}
}
</script>
</body>
</html>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras