Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как работать с существующими элементами на HTML-форме с помощью Java Script? / 25 сообщений из 28, страница 1 из 2
  1  все
28.10.2009, 16:40
    #36277831
Solomka
Solomka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
Здравствуйте!

Подскажите пожалуйста, как работать с существующими элементами на HTML-форме на Java Script?

Я чайник в области Java Script.
Если мне необходимо сгенерировать элементы я пользуюсь "document.writeln()".
Но вот как оперировать над существующими элементами разобраться не могу.
Ситуация такая на форме есть три кнопки и одна таблица.
При щелчке по одной кнопке таблица заполняется одними данными.
При щелчке по второй кнопке таблица заполняется другими данными.
При щелчке по третьей кнопке таблица заполняется третьими данными данными.

Но как это сделать не могу понять...
Искала готовый код но не нашла...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 16:54
    #36277870
WYPMAH
WYPMAH
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
SolomkaНо вот как оперировать над существующими элементами разобраться не могу.
получили элемент:
Код: plaintext
document.getElementById("ID")
и работайте с ним..

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 16:57
    #36277884
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
И не забывай делать тестовые примеры - это облегчит ответы на твои вопросы...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 17:08
    #36277917
Solomka
Solomka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
WYPMAHSolomkaНо вот как оперировать над существующими элементами разобраться не могу.
получили элемент:
Код: plaintext
document.getElementById("ID")
и работайте с ним..


Обычно работаю с такой структорой
document.NameForm.NameElement.
NameForm - навазние формы.
NameElement - название элемента.
Код работает и в Mozill'e и в Explorer'e.

Для данной задачи NameElement будет обзначать название таблицы.

Пыталась пероначально попытаться сначало стереть все имеющеся элементы таблицы:
Код: plaintext
1.
2.
3.
4.
function1 () {
while (document.MyFormName.TableTest.rows.length!= 0 )
{document.MyFormName.TableTest.deleteRow( 0 ); };
}
но в этом коде ошибка.
какая - понять не могу.
в интеренете поиски похожего кода не увенчались успехом.
но все равно остается вопрос как в таблицу добавлять другие данные?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 17:25
    #36277969
Solomka
Solomka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
krvsaИ не забывай делать тестовые примеры - это облегчит ответы на твои вопросы...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">
<title>Тестовая страница</title>
<script language=javascript>
f1()
{
while (document.MyFormName.TableTest.rows.length!= 0 )
{document.MyFormName.TableTest.deleteRow( 0 ); };
}
f2() {}
f3() {}
</script>
</head>
<body>
<form method="POST" name="MyFormName">
	<table border="1" width="100%" id="TableTest">
		<tr>
			<td> 1 </td>
			<td> 2 </td>
		</tr>
		<tr>
			<td> 3 </td>
			<td> 4 </td>
		</tr>
	</table>
	<p>
	<input type="button" value="Кнопка 1" name="B3" onclick="f1()">
	<input type="button" value="Кнопка 2" name="B4" onclick="f2()">
	<input type="button" value="Кнопка 3" name="B5" onclick="f3()">
	</p>
</form>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 17:31
    #36277980
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
Не так: document.MyFormName.TableTest,
а так: document.getElementById("TableTest")
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 17:42
    #36278007
Solomka
Solomka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
ShSergeНе так: document.MyFormName.TableTest,
а так: document.getElementById("TableTest")

Попробывала:
Код: plaintext
1.
2.
3.
4.
5.
f1()
{
while (document.getElementById("TableTest").rows.length!= 0 )
{document.getElementById("TableTest").deleteRow( 0 ); };
}
Все равно говориться что есть ошибка.
И строчки не стираются.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 17:47
    #36278020
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
function f1()
напишите при определении функции, а не просто f1().
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 17:49
    #36278024
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
onclick="f1(); return false", чтобы форма не сабмитилась. Кстати, здесь она и не нужна.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 17:59
    #36278040
Solomka
Solomka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
ShSerge function f1()
напишите при определении функции, а не просто f1().

ShSergeonclick="f1(); return false", чтобы форма не сабмитилась. Кстати, здесь она и не нужна.

Попробывала:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">
<title>Тестовая страница</title>
<script language=javascript>
fuction1()
{
while (document.getElementById("TableTest").rows.length!= 0 )
{document.getElementById("TableTest").deleteRow( 0 ); };
}
fuction2() {}
fuction3() {}
</script>
</head>
<body>
<form method="POST" name="MyFormName">
	<table border="1" width="100%" id="TableTest">
		<tr>
			<td> 1 </td>
			<td> 2 </td>
		</tr>
		<tr>
			<td> 3 </td>
			<td> 4 </td>
		</tr>
	</table>
	<p>
	<input type="button" value="Кнопка 1" name="B3" onclick="fuction1(); return false">
	<input type="button" value="Кнопка 2" name="B4" onclick="fuction2(); return false">
	<input type="button" value="Кнопка 3" name="B5" onclick="fuction3(); return false">
	</p>
</form>
</body>
</html>
Всё равно не работет так как надо.
И ругается на ошибку
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 18:04
    #36278046
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
fuction f() а не fuction1()
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 18:07
    #36278052
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
и не fuction, а function f1()
1.Каждая функция начинается со слова function, далее идёт название функции
2. Забудьте про document.write и пользуйтесь document.getElementById
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 18:09
    #36278055
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
и здесь исправьте в input'ах и return false уберите
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<script>
function f1()
{
while (document.getElementById("TableTest").rows.length!= 0 )
{document.getElementById("TableTest").deleteRow( 0 ); };
}
function f2() {}
function f3() {}

</script>
...................................................
<input type="button" value="Кнопка 1" name="B3" onclick="f1(); ">
<input type="button" value="Кнопка 2" name="B4" onclick="f2(); ">
<input type="button" value="Кнопка 3" name="B5" onclick="f3(); ">
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 18:13
    #36278065
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
и ещё, вроде при нажатии на первую кнопку из таблицы удаляются все строки?
Мне кажется проще написать так
Код: plaintext
1.
document.getElementById('TableTest').innerHTML = '';
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 18:38
    #36278109
Solomka
Solomka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
EmilRegisи не fuction, а function f1()
1.Каждая функция начинается со слова function, далее идёт название функции
2. Забудьте про document.write и пользуйтесь document.getElementById

EmilRegisи здесь исправьте в input'ах и return false уберите
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<script>
function f1()
{
while (document.getElementById("TableTest").rows.length!= 0 )
{document.getElementById("TableTest").deleteRow( 0 ); };
}
function f2() {}
function f3() {}

</script>
...................................................
<input type="button" value="Кнопка 1" name="B3" onclick="f1(); ">
<input type="button" value="Кнопка 2" name="B4" onclick="f2(); ">
<input type="button" value="Кнопка 3" name="B5" onclick="f3(); ">


EmilRegisи ещё, вроде при нажатии на первую кнопку из таблицы удаляются все строки?
Мне кажется проще написать так
Код: plaintext
1.
document.getElementById('TableTest').innerHTML = '';



Попробывала сделать так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">
<title>Тестовая страница</title>
<script language=javascript>
function f1()
{
document.getElementById("TableTest").innerHTML = '';
}
function f2() {}
function f3() {}
</script>
</head>
<body>
<form method="POST" name="MyFormName">
	<table border="1" width="100%" id="TableTest">
		<tr>
			<td> 1 </td>
			<td> 2 </td>
		</tr>
		<tr>
			<td> 3 </td>
			<td> 4 </td>
		</tr>
	</table>
	<p>
	<input type="button" value="Кнопка 1" name="B3" onclick="f1(); ">
	<input type="button" value="Кнопка 2" name="B4" onclick="f2(); ">
	<input type="button" value="Кнопка 3" name="B5" onclick="f3(); ">
	</p>
</form>
</body>
</html>
При загрузке Explorer не ругается, в при щелчке по первой кнопке возникает ошибка.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 18:55
    #36278134
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
хы, забавно, и правда IE не работает..а в фаерфоксе работает...Возможно IE не понимает как элемент типа table можно чем-то заполнить кроме tr-ов)))
Ну попрбуйте своим старым способом с циклом
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 19:22
    #36278168
Solomka
Solomka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
EmilRegisхы, забавно, и правда IE не работает..а в фаерфоксе работает...Возможно IE не понимает как элемент типа table можно чем-то заполнить кроме tr-ов)))
Ну попрбуйте своим старым способом с циклом

С таким циклом:
Код: plaintext
1.
2.
while (document.MyFormName.TableTest.rows.length!= 0 )
{document.MyFormName.TableTest.deleteRow( 0 ); };
И с таким циклом:
Код: plaintext
1.
while (document.getElementById("TableTest").rows.length!= 0 )
{document.getElementById("TableTest").deleteRow( 0 ); };
УДАЛЕНИЕ строк работает.
Ошибка первоначального кода была в том что не стояло слово "function".

Но как в таблицу добавить новые данные?
Посмотрела "rows" и "cells"не разобралась как модно добавлять в таблицу новые строки и ячейки.
Или это вообще делается другим методом?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 20:29
    #36278242
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
Solomka,

Ага. Понял. Тебе с мальчиками познакомиться захотелось. Могу тебя огорчить - наша модератор - девочка.
Если не захотелось - читай книжки или пробуй то, чего написала и то, что мы тебе.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 20:32
    #36278246
Ps-spectre
Ps-spectre
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
Solomka, я бы как-то так делал:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
    <script type="text/javascript">
        function DeleteRow(table) {
            var _index = document.getElementById('table1').rows.length- 1 ;
            document.getElementById(table).deleteRow(_index);
        }
        function InsertRow(table) {
            var _index = document.getElementById('table1').rows.length;
            var _row = document.getElementById(table).insertRow(_index);
            var _cell0 = _row.insertCell( 0 );
            var _cell1 = _row.insertCell( 1 );
            _cell0.appendChild(document.createTextNode("r" + _index + "&td0"));
            _cell1.appendChild(document.createTextNode("r" + _index + "&td1"));
        }    
    </script>
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
    
    <table id="table1">
        <tr><td>r0&td0</td><td>r0&td1</td></tr>
        <tr><td>r1&td0</td><td>r1&td1</td></tr>
        <tr><td>r2&td0</td><td>r2&td1</td></tr>
    </table>    
    
    <a href="javascript:DeleteRow('table1')">удалить</a>
    <a href="javascript:InsertRow('table1')">вставить</a>

table
row
cell
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 21:59
    #36278333
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
EmilRegisхы, забавно, и правда IE не работает..а в фаерфоксе работает...Возможно IE не понимает как элемент типа table можно чем-то заполнить кроме tr-ов)))
Ну попрбуйте своим старым способом с цикломВ ИЕ innerHTML у табличных элементов read-only (кроме td).

Вот неплохой вариант очистить табличку (тестовый пример целиком)
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<html>
<head>
<style type="text/css">
.span-a {cursor:pointer; color:blue; text-decoration:underline;}
table {border:1px solid black;}
</style>
<script type="text/javascript">
function ClearTable() {
	var tbl = document.getElementById("tab1");
	tbl.replaceChild(tbl.firstChild.cloneNode(false), tbl.firstChild);
}
</script>
</head>
<body>
<table id="tab1"><tr><td> 11111 </td><td> 22222 </td></tr><tr><td> 3333 </td><td> 44444 </td></tr></table>
<span class="span-a" onclick="ClearTable();">clear Table</span>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 22:09
    #36278343
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
Яростный Меч...В ИЕ innerHTML у табличных элементов read-only (кроме td).
Есть такая фишка, но, сам же понимаешь, что не в этом проблема. Хотя, то что это написал - хорошо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.10.2009, 22:25
    #36278361
Ps-spectre
Ps-spectre
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
Я так понимаю, для небольших таблиц, такое удаление будет не долгим: (зато работать должно везде)
Код: plaintext
1.
2.
3.
4.
5.
        function ClearTable(table) {
            var t = document.getElementById(table);
            var l = t.rows.length;
            while (l --> 0) t.deleteRow(0);
        }
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2009, 07:00
    #36278576
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
как много вариантов - циклы, клонирование, иннерхтмл :-) . А я бы просто грохнула tbody и радовалась. И шапочка бы от таблички осталась на месте. tbl.tBodies[0].removeNode()
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2009, 10:02
    #36278758
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
illionкак много вариантов - циклы, клонирование, иннерхтмл :-) . А я бы просто грохнула tbody и радовалась. И шапочка бы от таблички осталась на месте. tbl.tBodies[0].removeNode() Точно!
А потом если надо добавить строчку, tbody автоматически создается. Так во всех браузерах?
К тому же у tbody может быть указан класс? (я ради этого и клонировал)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2009, 10:47
    #36278883
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как работать с существующими элементами на HTML-форме с помощью Java Script?
Яростный Меч
А потом если надо добавить строчку, tbody автоматически создается. Так во всех браузерах?

M$ IE как всегда
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как работать с существующими элементами на HTML-форме с помощью Java Script? / 25 сообщений из 28, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 556ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1454047]:
 0ms
get settings:
 11ms
get forum list:
 17ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 165ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 61ms
get tp. blocked users:
 1ms
others: 282ms
total:  556ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]