在html表中展開/折疊div從數據庫中檢索數據
[英]Expand/Collapse div inside html table retrieving data from db
問題描述
在包含子行的基本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);
期望子數據僅在展開的Click上顯示，並在折疊時隱藏。
1 個解決方案
解決方案1
0 已采納 2019-07-26 09:37:55
如果您可以使用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>
展開和折疊 HTML 表數據行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.