Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.04.2016, 12:24
Аспирант
Отправить личное сообщение для gazman Посмотреть профиль Найти все сообщения от gazman
 
Регистрация: 02.09.2015
Сообщений: 38

установка стиля элемента по событию
здравствуйте

цель - при вводе в поле формы текста функция должна найти этот текст в таблице и сделать у элемента таблицы бордер.
написал функцию по событию onclick. она срабатывает, стиль подключается и сразу исчезает. нужно, чтобы стиль оставался всегда.
вот разметка:
<form>
	<input type="text" id="text" />
	<input type="submit" id="submit" onclick="search()" />
</form>

<table>
	<tr>
		<td>s4567</td>
		<td>9876</td>
		<td>описание1</td>
		<td>продукт1</td>
	</tr>
	<tr>
		<td>s4568</td>
		<td>9877</td>
		<td>описание2</td>
		<td>продукт2</td>
	</tr>
	<tr>
		<td>s4569</td>
		<td>9878</td>
		<td>описание3</td>
		<td>продукт3</td>
	</tr>
	<tr>
		<td>s4570</td>
		<td>9879</td>
		<td>описание4</td>
		<td>продукт4</td>
	</tr>
	<tr>
		<td>s4571</td>
		<td>9880</td>
		<td>описание5</td>
		<td>продукт5</td>
	</tr>
	<tr>
		<td>s4572</td>
		<td>9881</td>
		<td>описание6</td>
		<td>продукт6</td>
	</tr>
</table>


джава скрипт

function search()
{
	var txt = document.getElementById("text").value;
	if (txt == "")
	{
		alert("Введено пустое значение");
		return false;
	}
	var tags = document.getElementsByTagName("td");
	for (i = 0; i <= tags.length; i++)
	{
		if (tags[i].innerHTML == txt)
		{
			return tags[i].style.border = '#00FF00 solid 1px';
		}
	}
}


помогите, пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 29.04.2016, 12:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от gazman
i <= tags.length
почему?
Сообщение от gazman
return tags[i].style.border
нафига?
Сообщение от gazman
return false;
лучше бы не здесь
Ответить с цитированием
  #3 (permalink)  
Старый 29.04.2016, 13:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

gazman,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<form>
	<input type="text" id="text" />
	<input type="submit" id="submit" onclick="return search()" />
</form>

<table>
	<tr>
		<td>s4567</td>
		<td>9876</td>
		<td>описание1</td>
		<td>продукт1</td>
	</tr>
	<tr>
		<td>s4568</td>
		<td>9877</td>
		<td>описание2</td>
		<td>продукт2</td>
	</tr>
	<tr>
		<td>s4569</td>
		<td>9878</td>
		<td>описание3</td>
		<td>продукт3</td>
	</tr>
	<tr>
		<td>s4570</td>
		<td>9879</td>
		<td>описание4</td>
		<td>продукт4</td>
	</tr>
	<tr>
		<td>s4571</td>
		<td>9880</td>
		<td>описание5</td>
		<td>продукт5</td>
	</tr>
	<tr>
		<td>s4572</td>
		<td>9881</td>
		<td>описание6</td>
		<td>продукт6</td>
	</tr>
</table>

<script>
function search() {
    var txt = document.getElementById("text").value;
    if (txt) {
        var tags = document.getElementsByTagName("td");
        for (i = 0; i < tags.length; i++)
            if (tags[i].innerHTML == txt) tags[i].style.border = "#00FF00 solid 1px"
    } else alert("Введено пустое значение");
    return false
};
</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 30.04.2016, 10:52
Кандидат Javascript-наук
Отправить личное сообщение для aklis Посмотреть профиль Найти все сообщения от aklis
 
Регистрация: 27.04.2015
Сообщений: 99

насчет сразу исчезает - при перезагрузке страницы чтоли? А по задумке должен оставаться?
Ответить с цитированием
  #5 (permalink)  
Старый 02.05.2016, 23:05
Аспирант
Отправить личное сообщение для gazman Посмотреть профиль Найти все сообщения от gazman
 
Регистрация: 02.09.2015
Сообщений: 38

да. должен стиль оставаться для найденного элемента
Ответить с цитированием
  #6 (permalink)  
Старый 02.05.2016, 23:08
Аспирант
Отправить личное сообщение для gazman Посмотреть профиль Найти все сообщения от gazman
 
Регистрация: 02.09.2015
Сообщений: 38

Сообщение от рони Посмотреть сообщение
gazman,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<form>
	<input type="text" id="text" />
	<input type="submit" id="submit" onclick="return search()" />
</form>

<table>
	<tr>
		<td>s4567</td>
		<td>9876</td>
		<td>описание1</td>
		<td>продукт1</td>
	</tr>
	<tr>
		<td>s4568</td>
		<td>9877</td>
		<td>описание2</td>
		<td>продукт2</td>
	</tr>
	<tr>
		<td>s4569</td>
		<td>9878</td>
		<td>описание3</td>
		<td>продукт3</td>
	</tr>
	<tr>
		<td>s4570</td>
		<td>9879</td>
		<td>описание4</td>
		<td>продукт4</td>
	</tr>
	<tr>
		<td>s4571</td>
		<td>9880</td>
		<td>описание5</td>
		<td>продукт5</td>
	</tr>
	<tr>
		<td>s4572</td>
		<td>9881</td>
		<td>описание6</td>
		<td>продукт6</td>
	</tr>
</table>

<script>
function search() {
    var txt = document.getElementById("text").value;
    if (txt) {
        var tags = document.getElementsByTagName("td");
        for (i = 0; i < tags.length; i++)
            if (tags[i].innerHTML == txt) tags[i].style.border = "#00FF00 solid 1px"
    } else alert("Введено пустое значение");
    return false
};
</script>
</body>
</html>
спасибо. подскажите, пожалуйста, почему мой код не работает?
Ответить с цитированием
  #7 (permalink)  
Старый 02.05.2016, 23:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

gazman,
потому что страница перезагружается при клике и элемента с индексом tags.length не существует.
Ответить с цитированием
  #8 (permalink)  
Старый 03.05.2016, 08:34
Аспирант
Отправить личное сообщение для gazman Посмотреть профиль Найти все сообщения от gazman
 
Регистрация: 02.09.2015
Сообщений: 38

Рони, объясните, пожалуйста, почему происходит перезагрузка страницы? я хочу разобраться, чтобы не совершать похожие ошибки в дальнейшем.
Ответить с цитированием
  #9 (permalink)  
Старый 03.05.2016, 13:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

gazman,
форма, жмакается кнопа отправить, ничего отправку не отменяет, вот и перезагрузка или переход на несуществующий action.
в моём варианте происходит отмена отправки.
Сообщение от рони
onclick="return search()"
search возвращает false, следовательно return false или отменить клик, и клик не всплывает до формы.
Ответить с цитированием
  #10 (permalink)  
Старый 03.05.2016, 14:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

gazman,
можно отменить через submit
<form  onsubmit="return false">
  <input type="text" id="text" />
  <input type="submit" id="submit" onclick="search()" />
</form>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
переключение элемента по событию Игорь_12345 Элементы интерфейса 11 05.08.2013 14:50
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Получение стиля элемента. BreatheInTheVoid Элементы интерфейса 4 01.05.2010 17:25
Установка overflow элемента gipper2006 Элементы интерфейса 6 22.03.2010 07:39
[новичок] Установка стиля элемента Vo.One Элементы интерфейса 3 18.03.2010 19:57