| |
|
|
| | Доброго всем времени суток, задача примерно такого плана,
Есть таблица, в которой нечетные строки это краткое описание, четные строки, полное описание, по умолчанию таблица открывается со свернутыми полними описаниями, необходимо создать скрипт который позволить открывать выбранные полные описания не закрывая ранее открытые, и закрывать полные описание которые уже не нужны...
Заранее всем благодарен за любую помощь! | |
| |
|
|
| |
|
|
| |
для: Besenok
(10.10.2008 в 17:50)
| | | Если я правильно понял, как то так:
<html>
<head>
<script type="text/jscript">
function Show(id){
if(window.document.getElementById('t'+id).style.display=='none'){
window.document.getElementById('t'+id).style.display='block';
}else{
window.document.getElementById('t'+id).style.display='none';
}
}
</script>
<style type="text/css">
.ko{
background-color:#FFFF00;
border:1px solid;
}
.po{
background-color:#FF0000;
display:none;
}
</style>
</head>
<body>
<table>
<tr>
<td class="ko" onclick="Show(1)">Краткое описание 1</td>
</tr>
<tr>
<td id=t1 class="po" >Полное описание 1</td>
</tr>
<tr>
<td class="ko" onclick="Show(2)">Краткое описание 2</td>
</tr>
<tr>
<td id=t2 class="po" >Полное описание 2</td>
</tr>
<tr>
<td class="ko" onclick="Show(3)">Краткое описание 3</td>
</tr>
<tr>
<td id=t3 class="po" >Полное описание 3</td>
</tr>
</table>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Николай2357
(10.10.2008 в 20:59)
| | | Да, все правильно, спасибо!!! Теперь буду пытаться разобраться! | |
| |
|
|
| |
|
|
| |
для: Besenok
(10.10.2008 в 21:09)
| | | Если не затруднит, можете пояснить как еще можно добавить функцию, чтобы строка с полным описание появлялась плавно. Заранее благодарен | |
| |
|
|
| |
|
|
| |
для: Besenok
(10.10.2008 в 21:09)
| | | Это гораздо сложнее и тем более с таблицей. Можно с дивами что то помудрить, если сильно надо, попозже могу попробовать.
К стати, а что плавно, размер или яркость? | |
| |
|
|
| |
|
|
| |
для: Николай2357
(10.10.2008 в 21:50)
| | | я имел ввиду эффект, чтобы строка не появлялась вся сразу, а как бы выезжала
P.S. А в Мозиле не работает к сожалению... как это можно поправить?
P.S.S. исправил <script language="JavaScript" type="text/javascript"> заработало... но при закрытии остается пустое место вместо строки, при повторном открытии скрытой строки она появляется еще уровнем ниже и т.д. | |
| |
|
|
| |
|
|
| |
для: Besenok
(10.10.2008 в 21:56)
| | |
function Show(id){
var el = document.getElementById(id);
el.style.display = (el.style.display=='none')?'inline':'none';
}
|
<table>
<tr onClick="Show('td')">
<td id="td" style='display:none'>
Ur text....
</td>
</tr>
</table>
|
если <td> в <tr> одна тогда display:inline;
если же там ещё какоето барахло тогда display:block; | |
| |
|
|
| |
|
|
| |
для: sl1p
(11.10.2008 в 01:01)
| | | Если я правильно понял, то это должно выглядеть так как в листинге,
<html>
<head>
<script language="JavaScript" type="text/javascript">
function Show(id){
var el = document.getElementById(id);
el.style.display = (el.style.display=='none')?'inline':'none';
}
</script>
<style type="text/css">
.ko{
background-color:#FFFF00;
border:1px solid;
}
.po{
background-color:#FF0000;
}
</style>
</head>
<body>
<table>
<tr>
<td class="ko" onClick="Show(1)"><a href="javascript:id('1')">Краткое описание 1</a></td>
</tr>
<tr onClick="Show('1')" class="po">
<td id="1" style='display:none'>Полное описание 1</td>
</tr>
<tr>
<td class="ko" onClick="Show(2)"><a href="javascript:id('2')">Краткое описание 2</a></td>
</tr>
<tr onClick="Show('2')" class="po" >
<td id="2" style='display:none'>Полное описание 2</td>
</tr>
<tr>
<td class="ko" onClick="Show(3)"><a href="javascript:id('3')">Краткое описание 3</a></td>
</tr>
<tr onClick="Show('3')" class="po" >
<td id="3" style='display:none'>Полное описание 3</td>
</tr>
</table>
</body>
</html>
|
только проблемма в том что при закрытии сторока всетаки оставляет пробел, а при повторном открытии появляется со сдвигом в право | |
| |
|
|
| |
|
|
| |
для: Besenok
(11.10.2008 в 01:51)
| | | function Show(id){
var el = document.getElementById(id);
el.style.display = (el.style.display=='none')?'table-cell':'none';
}
и ещё старайтесь не начинать id цифрой..
---
лучше уже тогда так
function Show(id){
var el = document.getElementById('t'+id);
el.style.display = (el.style.display=='none')?'table-cell':'none';
}
<td id='t1'>
onClick="Show(1)" | |
| |
|
|
| |
|
|
| |
для: sl1p
(11.10.2008 в 02:04)
| | | Спасибо, заработало!!! | |
| |
|
|
| |
|
|
| |
для: Besenok
(11.10.2008 в 02:06)
| | | и чтобы не "клацалась" ссылка лучше так:
<a href="" onClick="return false">Краткое описание 1</a>
:) | |
| |
|
|
| |
|
|
| |
для: sl1p
(11.10.2008 в 02:04)
| | | я прошу прощение за может совсем бестолковый вопрос, но всетаки, что значит когда наводиш на ссылочку получаешь адрес
javascript:slide('row_1','ltr','Yes');
где и как можно использовать эти параметры
Пример лежит здесь http://www.forexpros.ru/economic-calendar/ | |
| |
|
|
| |
|
|
| |
для: Besenok
(11.10.2008 в 02:15)
| | | А вот еще один смешной вариант, разбирайтесь, раз просили. :)
<html>
<head>
<script language="JavaScript" type="text/javascript">
var a=20;
var b=1;
var globid;
var desc;
function Descript(id){
switch(id)
{
case 1:desc="Полное описание1";
break;
case 2:desc="Полное описание2";
break;
case 3:desc="Полное описание3";
break;
}
}
function Show(id){
globid=id;
var s=document.getElementById('t'+id).style.height;
if(s=='1px'){
Bigger();
}else{
//window.document.getElementById('t'+id).style.height='1px';
Smiler();
}
}
function Bigger(){
var s;
if(b < a){
var st=setTimeout("Bigger();",20);
b++;
}
window.document.getElementById('t'+globid).style.height=b+'px';
if(b==a){
window.document.getElementById('t'+globid).innerHTML = desc;
clearInterval(st);
b=0;
}
}
function Smiler(){
window.document.getElementById('t'+globid).innerHTML = "";
var s;
if(b < a){
var st=setTimeout("Smiler();",20);
b++;
}
if(b==a){
clearInterval(st);
b=0;
}else{
var c=a-b;
window.document.getElementById('t'+globid).style.height=c+'px';
}
}
</script>
<style type="text/css">
.ko{ cursor:pointer;
background-color:#FFFF00;
border:1px solid;
}
.po{
background-color:#FF0000;
}
</style>
</head>
<body>
<table>
<tr>
<td class="ko" onClick="Show(1),Descript(1)">Краткое описание 1</td>
</tr>
<tr>
<td id=t1 style="height:1px;" class="po" ></td>
</tr>
<tr>
<td class="ko" onClick="Show(2),Descript(2)">Краткое описание 2</td>
</tr>
<tr>
<td id=t2 style="height:1px;" class="po" ></td>
</tr>
<tr>
<td class="ko" onClick="Show(3),Descript(3)">Краткое описание 3</td>
</tr>
<tr>
<td id=t3 style="height:1px;" class="po" ></td>
</tr>
</table>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Николай2357
(11.10.2008 в 02:26)
| | | Спасибо, симпатично! :) | |
| |
|
|
| |
|
|
| |
для: Besenok
(11.10.2008 в 02:15)
| | | ну это тот же самый onClick
вот почему я ненавижу жс, ибо можно вызывать функции через адресную строку=\ | |
| |
|
|
