show и hide
Всех приветствую, Web-ом начал заниматься недавно, являюсь "продвинутым чайником"
есть таблица <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>текст1</td> </tr> <tr> <td>текст2</td> </tr> <tr> <td>текст3</td> </tr> </table> нужно при нажатии на "текст1" скрывать строки с "текст2" и "текст3", если они скрыты, то нужно показать, вот пример такой таблицы http://inecostroy.ru/ru/price (юзал поиск и гугл, находил много похожего, но "извлечь" из кода то что нужно мне не смог, объясните пожалуйста реализацию именно моей задачи (интересует код), в программировании шарю нормально, пойму вас быстро) |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank</title>
<script type="text/javascript" src="scripts/base.debug.js"></script>
<script type="text/javascript">
var allNext = function(elem) {
if (elem) {
var result = [], i = 0;
while (elem = elem.nextSibling)
if (elem.nodeType == 1) result[i++] = elem;
return result;
}
}
var sh = function() {
var elems = allNext(this), i = elems.length;
while (i) elems[--i].style.display = elems[i].style.display == 'none' ? '' : 'none';
};
window.onload = function() {
document.getElementById('t1').onclick = sh;
};
</script>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr id="t1">
<td>
текст1
</td>
</tr>
<tr>
<td>
текст2
</td>
</tr>
<tr>
<td>
текст3
</td>
</tr>
</table>
</body>
</html>
|
а имея массив (вектор), содержимое которого указывает на количество скрываемых строк, и несколько "главных" строк имеющих ID (под которыми располагаются скрываемые строки), как связать это с функциями?
|
Если я правильно понял вопрос:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank</title>
<script type="text/javascript">
var $A = function(args) {
if (args) {
var result = [], i = args.length;
while (i) result[--i] = args[i];
return result;
}
return [];
};
Function.prototype.bind = function() {
var method = this, args = $A(arguments), thisObj = args.shift();
return function() {
return method.apply(thisObj == null ? this : thisObj, args.concat($A(arguments)));
};
};
var Element = {
allNext: function(elem) {
if (elem) {
var result = [], i = 0;
while (elem = elem.nextSibling)
if (elem.nodeType == 1) result[i++] = elem;
return result;
}
}
};
var sh = function(length) {
var elems = Element.allNext(this), i = (arguments.length ? length : elems.length);
while (i) elems[--i].style.display = elems[i].style.display == 'none' ? '' : 'none';
};
window.onload = function() {
var elems = {
t1: 2,
t2: 3,
t3: 1
};
for (var id in elems) {
document.getElementById(id).onclick = sh.bind(null, elems[id]);
}
};
</script>
<style type="text/css">
#t1, #t2, #t3
{
background: #ff9;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr id="t1">
<td>
текст1
</td>
</tr>
<tr>
<td>
текст2
</td>
</tr>
<tr>
<td>
текст3
</td>
</tr>
<tr id="t2">
<td>
текст1
</td>
</tr>
<tr>
<td>
текст2
</td>
</tr>
<tr>
<td>
текст3
</td>
</tr>
<tr>
<td>
текст4
</td>
</tr>
<tr id="t3">
<td>
текст1
</td>
</tr>
<tr>
<td>
текст2
</td>
</tr>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:03. |