Форум

gazman · #1 (**permalink**) 29.04.2016, 12:24

здравствуйте

цель - при вводе в поле формы текста функция должна найти этот текст в таблице и сделать у элемента таблицы бордер.
написал функцию по событию 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

Сообщение от gazman

i <= tags.length

почему?

Сообщение от gazman

return tags[i].style.border

нафига?

Сообщение от gazman

return false;

лучше бы не здесь

рони · #3 (**permalink**) 29.04.2016, 13:04

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>

aklis · #4 (**permalink**) 30.04.2016, 10:52

насчет сразу исчезает - при перезагрузке страницы чтоли? А по задумке должен оставаться?

gazman · #5 (**permalink**) 02.05.2016, 23:05

да. должен стиль оставаться для найденного элемента

gazman · #6 (**permalink**) 02.05.2016, 23:08

Сообщение от рони

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

gazman,
потому что страница перезагружается при клике и элемента с индексом tags.length не существует.

gazman · #8 (**permalink**) 03.05.2016, 08:34

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

рони · #9 (**permalink**) 03.05.2016, 13:23

gazman,
форма, жмакается кнопа отправить, ничего отправку не отменяет, вот и перезагрузка или переход на несуществующий action.
в моём варианте происходит отмена отправки.

Сообщение от рони

onclick="return search()"

search возвращает false, следовательно return false или отменить клик, и клик не всплывает до формы.

рони · #10 (**permalink**) 03.05.2016, 14:17

gazman,
можно отменить через submit

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

Форум

Справочник

Discord чат

Курсы javascript