ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как работать с существующими элементами на HTML-форме с помощью Java Script?
25 сообщений из 28, страница 1 из 2
  1  все
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36277831
Solomka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Solomka
Участник
Здравствуйте!

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

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

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

_______________
AnimeBay - аниме магазин, который Вас не разочарует.
...
Рейтинг: 0 / 0
28.10.2009, 16:54
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36277884
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
И не забывай делать тестовые примеры - это облегчит ответы на твои вопросы...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
28.10.2009, 16:57
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36277917
Solomka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Solomka
Участник
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:08
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36277969
Solomka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Solomka
Участник
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:25
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36277980
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Не так: document.MyFormName.TableTest,
а так: document.getElementById("TableTest")
...
Рейтинг: 0 / 0
28.10.2009, 17:31
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278007
Solomka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Solomka
Участник
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:42
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278020
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
function f1()
напишите при определении функции, а не просто f1().
...
Рейтинг: 0 / 0
28.10.2009, 17:47
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278024
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
onclick="f1(); return false", чтобы форма не сабмитилась. Кстати, здесь она и не нужна.
...
Рейтинг: 0 / 0
28.10.2009, 17:49
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278040
Solomka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Solomka
Участник
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, 17:59
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278046
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
fuction f() а не fuction1()
...
Рейтинг: 0 / 0
28.10.2009, 18:04
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278052
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
и не fuction, а function f1()
1.Каждая функция начинается со слова function, далее идёт название функции
2. Забудьте про document.write и пользуйтесь document.getElementById
...
Рейтинг: 0 / 0
28.10.2009, 18:07
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278055
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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(); ">
...
Рейтинг: 0 / 0
28.10.2009, 18:09
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278065
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
и ещё, вроде при нажатии на первую кнопку из таблицы удаляются все строки?
Мне кажется проще написать так
Код: plaintext
1.
document.getElementById('TableTest').innerHTML = '';
...
Рейтинг: 0 / 0
28.10.2009, 18:13
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278109
Solomka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Solomka
Участник
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:38
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278134
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
хы, забавно, и правда IE не работает..а в фаерфоксе работает...Возможно IE не понимает как элемент типа table можно чем-то заполнить кроме tr-ов)))
Ну попрбуйте своим старым способом с циклом
...
Рейтинг: 0 / 0
28.10.2009, 18:55
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278168
Solomka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Solomka
Участник
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, 19:22
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278242
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Solomka,

Ага. Понял. Тебе с мальчиками познакомиться захотелось. Могу тебя огорчить - наша модератор - девочка.
Если не захотелось - читай книжки или пробуй то, чего написала и то, что мы тебе.
...
Рейтинг: 0 / 0
28.10.2009, 20:29
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278246
Ps-spectre
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ps-spectre
Участник
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, 20:32
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278333
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
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, 21:59
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278343
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Яростный Меч...В ИЕ innerHTML у табличных элементов read-only (кроме td).
Есть такая фишка, но, сам же понимаешь, что не в этом проблема. Хотя, то что это написал - хорошо.
...
Рейтинг: 0 / 0
28.10.2009, 22:09
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278361
Ps-spectre
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ps-spectre
Участник
Я так понимаю, для небольших таблиц, такое удаление будет не долгим: (зато работать должно везде)
Код: 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
28.10.2009, 22:25
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278576
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
как много вариантов - циклы, клонирование, иннерхтмл :-) . А я бы просто грохнула tbody и радовалась. И шапочка бы от таблички осталась на месте. tbl.tBodies[0].removeNode()
...
Рейтинг: 0 / 0
29.10.2009, 07:00
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278758
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
illionкак много вариантов - циклы, клонирование, иннерхтмл :-) . А я бы просто грохнула tbody и радовалась. И шапочка бы от таблички осталась на месте. tbl.tBodies[0].removeNode() Точно!
А потом если надо добавить строчку, tbody автоматически создается. Так во всех браузерах?
К тому же у tbody может быть указан класс? (я ради этого и клонировал)
...
Рейтинг: 0 / 0
29.10.2009, 10:02
| Ответить | Цитировать | Написать  
как работать с существующими элементами на HTML-форме с помощью Java Script?
    #36278883
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ex_Soft
Участник
Яростный Меч
А потом если надо добавить строчку, tbody автоматически создается. Так во всех браузерах?

M$ IE как всегда
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
29.10.2009, 10:47
| Ответить | Цитировать | Написать  
25 сообщений из 28, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как работать с существующими элементами на HTML-форме с помощью Java Script?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=36278065&tid=1454047]:
 0ms
get settings:
 8ms
get forum list:
 14ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 159ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 85ms
get tp. blocked users:
 2ms
others: 291ms
total:  576ms
созд. / загр.: 576ms
x
x
Закрыть


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