PHucker
Новичок
Здравствуйте! Помогите с такой проблемой: есть таблица в которой можно свернуть\развернуть строки. И вот когда разворачиваю работает, а обратно свернуть не могу. Для того чтобы было понятно выложу весь код:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table {
background-color: #D5EEEE;
border-collapse:collapse;
font:400 10pt/19px Arial,'MS Sans Serif','sans-serif';
}
table th {
background:#4682B4;
color:#fff;
}
table td, th {
padding:3px;
border:1px solid #D3D3D3;
}
.treetable label a{
cursor:pointer;
color:#fff;
font-weight:bold;
padding-left:16px;
}
.treetable tr {
display:none;
}
.treetable thead tr {
display:table-row;
}
.treetable .lev1 {
background:#6E9ECA;
display:table-row;
}
input[type="checkbox"]{
display:none;
}
input + a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
no-repeat 0px 5px;
}
input:checked + a{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
no-repeat 0px 5px;
}
td+td+td {text-align:right;}
</style>
</head>
<body><center>
<button onclick="MakeGroupTable();" id="cmdMakeGroup">Сгруппировать</button>
<button onclick="SwapAll(false);" id="cmdCollapseAll" disabled>Свернуть все</button>
<button onclick="SwapAll(true);" id="cmdExpandAll" disabled>Развернуть все</button>
<a href="extended.php"><button >Сгруппировать по дате</button></a>
<br><br>
<table id="MyTable"><script>
document.getElementById('cmdMakeGroup').disabled = false;
document.getElementById('cmdCollapseAll').disabled = true;
document.getElementById('cmdExpandAll').disabled = true;
function MakeGroupTable () {
var MyTable = document.getElementById('MyTable');
var rowCount = MyTable.rows.length;
var cellCount = MyTable.rows[1].cells.length;
var idx = 1;
var CurrentValue = '';
MyTable.className = 'treetable';
while (idx < rowCount) {
if (CurrentValue != MyTable.rows[idx].cells[0].innerHTML) {
CurrentValue = MyTable.rows[idx].cells[0].innerHTML;
MyTable.insertRow(idx);
MyTable.rows[idx].className = 'lev1';
for (i=0; i < cellCount; i++) {MyTable.rows[idx].insertCell(i);}
MyTable.rows[idx].cells[0].innerHTML = '<label><input type="checkbox"><a onclick="sh(this)">' + CurrentValue + '</a></label>';
} else {
MyTable.rows[idx].className = 'lev2';
MyTable.rows[idx].cells[0].innerHTML = ' ';
}
idx++;
rowCount = MyTable.rows.length;
}
document.getElementById('cmdMakeGroup').disabled = true;
document.getElementById('cmdCollapseAll').disabled = false;
document.getElementById('cmdExpandAll').disabled = false;
}
function ResetAll() {
var cs = document.getElementsByTagName('input');
for (i=0; i < cs.length; i++) {
if (cs.type == 'checkbox') {
cs.checked = false;
}
}
}
function ShowLevel(row,lv) {
var tBody = row.parentNode;
var i = row.rowIndex;
row = tBody.rows; // Попытка перейти к следующей строке
while (row && row.className.substring(3)*1 > lv) {
if (row.className.substring(3)*1 == lv+1) {
row.style.display = 'table-row';
if ((row.querySelector('td input')) && row.querySelector('td input').checked) {
ShowLevel(row,lv+1);
}
}
i+=1;
row = tBody.rows;
}
}
function HideLevel(row,lv) {
var i = row.rowIndex;
var tBody = row.parentNode;
row = tBody.rows; // Попытка перейти к следующей строке
while (row && row.className.substring(3)*1 > lv) {
row.style.display = 'none';
i+=1;
row = tBody.rows;
}
}
function sh(el) {
var row = el.parentNode.parentNode.parentNode;
var lv = row.className.substring(3)*1; // Уровень строки, циферка после 'lev'
if (row.querySelector('td input').checked) {
HideLevel(row,lv);
} else {
ShowLevel(row,lv);
}
}
function SwapAll(b) {
var tbl = document.getElementsByClassName('treetable')[0];
for (i=1; i < tbl.rows.length; i++) {
if (tbl.rows.className != 'lev1') {
if (b) {tbl.rows.style.display = 'table-row';}
else {tbl.rows.style.display = 'none';}
}
if (tbl.rows.querySelector('td input')) {tbl.rows.querySelector('td input').checked = b;}
}
}
</script>
<col width=100> <col width=150>
<thead>
<tr>
<th> Номер Счетчика </th>
<th> ID </th>
<th>  Fields  </th>
<th>  Description  </th>
<th>  <form action="<?=$_SERVER["PHP_SELF"]?>" method="get">
Введите дни(от 1 до 30):
<input type="text" name="name"><br>
<input type = "submit" value = "Считать">
<a href="example.php" ><input type = "button" value = "Сброс" onclick=""></a>
</form> </th>
<th>  Значение  </th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php
$connect = mysql_connect("*************", "*************", "**************") or die("Ошибка соединения!");
mysql_select_db("smartvend", $connect);
if (isset($_GET["name"]))
{
$name = $_GET["name"];
$query ="SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
FROM
amr_fields fields, amr_read_history history
WHERE
fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY)
ORDER BY MeterNum asc, ExecDate ASC";
}
else {
$result = mysql_query("SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
FROM
amr_fields fields, amr_read_history history
WHERE
fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
ORDER BY MeterNum asc, execdate DESC",$connect);
while ($data = mysql_fetch_row($result))
{
echo"<tr>";;
echo"<td>{$data[0]}</td>";
echo"<td>{$data[1]}</td>";
echo"<td>{$data[2]}</td>";
echo"<td>{$data[3]}</td>";
echo"<td>{$data[4]}</td>";
echo"<td>{$data[5]}</td>";
echo"</tr>";
}
}
$sql = mysql_query($query) or die("<p></p>");
while ($data = mysql_fetch_row($sql))
{
echo"<tr>";
echo"<td>{$data[0]}</td>";
echo"<td>{$data[1]}</td>";
echo"<td>{$data[2]}</td>";
echo"<td>{$data[3]}</td>";
echo"<td>{$data[4]}</td>";
echo"<td>{$data[5]}</td>";
echo"</tr>";
}
mysql_close();
?>
</table>
</center>
</body>
</html>
Последнее редактирование:
