дело в том что я язык JS пока не изучал
Начните с установки FireBug и посмотрите ошибки появляющиеся при попытке закрыть список.
]]>ORDER BY ... LIMIT 100дело в том что я язык JS пока не изучал
Начните с установки FireBug и посмотрите ошибки появляющиеся при попытке закрыть список.
]]>
]]>Если надо свернуть все строки, то смотрите функцию SwapAll(). Отлаживать JavaScript удобно с помощью FireBug в браузере FireFox.
"Свернуть все" работает. Не работает просто "свернуть". Развернул строку, обратно свернуть не могу(
]]><!DOCTYPE html>
<html>
<title>Таблица</title>
<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,iVBORw0KGgo
AAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXM
AAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8 OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN
+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m39
7YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2
SZ7sw/1BEtX94AXYTVmyR94 mPAAAAAElFTkSuQmCC)
no-repeat 0px 5px;
}
input:checked + a{
background:url(data:image/png;base64,iVBORw0KGg
oAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWX
MAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3ze
K9mAlHRc upSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isV
G16WSQC0/
D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltd
taM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
no-repeat 0px 5px;
}
td+td+td {text-align:right;}
</style>
</head>
<body><center><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[i].type == 'checkbox') {
cs[i].checked = false;
}
}
}
function ShowLevel(row,lv) {
var tBody = row.parentNode;
var i = row.rowIndex;
row = tBody.rows[i]; // Попытка перейти к следующей строке
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[i];
}
}
function HideLevel(row,lv) {
var i = row.rowIndex;
var tBody = row.parentNode;
row = tBody.rows[i]; // Попытка перейти к следующей строке
while (row && row.className.substring(3)*1 > lv) {
row.style.display = 'none';
i+=1;
row = tBody.rows[i];
}
}
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[i].className != 'lev1') {
if (B) {tbl.rows[i].style.display = 'table-row';}
else {tbl.rows[i].style.display = 'none';}
}
if (tbl.rows[i].querySelector('td input')) {tbl.rows[i].querySelector('td input').checked = b;}
}
}
</script>
<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">
<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("********", "report_user", "********") 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>Вот что получилось. Но у меня при клике на "second" или на "tirdinfo" раскрывается "firstinfo". Не понимаю
$aReader = array(
"firstinfo" => array("$firstmeter"), // $firstmeter - Это данные из БД .
"secondinfo" => array("$secondmeter"),
"thirdinfo" => array("$thirdmeter")
);
foreach ($aReader as $sKey => $aFamily){
echo(
"<h2><button onclick=showTooltip()>$sKey </button></h2>".
"<ul id=tooltip style='display: none'>"
);foreach ($aFamily as $sRedaer)
{
echo "<li>$sReader</li>";
}
echo "</ul>";
}
вот скрипт
<script>function showTooltip()
{
var myDiv = document.getElementById('tooltip');
if(myDiv.style.display == 'none')
{
myDiv.style.display = 'block';
} else {
myDiv.style.display = 'none';
}
return false;
}</script>
$aReader = array(
"firstinfo" => array("$firstmeter"), // $firstmeter - Это данные из БД .
"secondinfo" => array("$secondmeter"),
"thirdinfo" => array("$thirdmeter")
);
foreach ($aReader as $sKey => $aFamily){
echo(
"<h2><button onclick=showTooltip()>$sKey </button></h2>".
"<ul id=tooltip style='display: none'>"
);
foreach ($aFamily as $sRedaer)
{
echo "<li>$sReader</li>";
}
echo "</ul>";
}
а если у меня 500 записей или я вас неправильно понял?
Выбирайте данные из БД запросом и собирайте их в массив.
]]>Выберите данные из БД в многомерный массив, где первым ключом массива будет повторяющееся значение, а далее данные. Затем в цикле сформируйте HTML разметку.
$array[12][0] = 'данные 1'; $array[12][1] = 'данные 2';
а если у меня 500 записей или я вас неправильно понял?
]]>$array[12][0] = 'данные 1';
$array[12][1] = 'данные 2';<script>function showTooltip()
{
var myDiv = document.getElementById('tooltip');
if(myDiv.style.display == 'none')
{
myDiv.style.display = 'block';
} else {
myDiv.style.display = 'none';
}
return false;
}</script>
<button onclick=showTooltip()> Показать </button>
<div id=tooltip style='display: none'>
<li>Значение числа 12 №1</li>
<li>Значение числа 12 №2</li>
<li>Значение числа 12 №3</li>
<li>Значение числа 12 №4</li>
</div>
только эти данные берутся из БД в разном порядке. Потому что у меня стоит сортировка по времени.