在包含子行的基本 HTML 表中，如何展开和折叠 '+' 的父行 onClick。
下面是我尝试过的脚本，其中 '+' 的 OnClick 不会发生任何变化，只有叹气从 '+' 变为 '-' 并且子行被直接呈现，当它处于折叠模式时应该隐藏。我正在使用 PHP 从我的数据库中获取这个子行表数据。附上 PHP 代码、脚本和数据库数据。
可以在数据表上应用相同的解决方案吗？
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>
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);
期望子数据仅在单击展开时显示并在折叠时隐藏。
如果您可以使用像 jQuery 这样的前端库而不是普通的 JavaScript，您可以减少脚本行数。
<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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句