Форум

n00b · #1 (**permalink**) 06.04.2009, 22:18

Всех приветствую, 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

(юзал поиск и гугл, находил много похожего, но "извлечь" из кода то что нужно мне не смог, объясните пожалуйста реализацию именно моей задачи (интересует код), в программировании шарю нормально, пойму вас быстро)

Riim · #2 (**permalink**) 07.04.2009, 03:16

<!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>

n00b · #3 (**permalink**) 07.04.2009, 18:35

а имея массив (вектор), содержимое которого указывает на количество скрываемых строк, и несколько "главных" строк имеющих ID (под которыми располагаются скрываемые строки), как связать это с функциями?

Riim · #4 (**permalink**) 07.04.2009, 19:00

Если я правильно понял вопрос:

<!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>

Форум

Справочник

Discord чат

Курсы javascript