Javascript-форум - Заполнение таблицы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Заполнение таблицы (https://javascript.ru/forum/dom-window/39752-zapolnenie-tablicy.html)

Цитата:

Сообщение от bes (Сообщение 261817)

выделение наверное будешь оформлять каким-либо классом, тогда при отправке данных лучше просто взять данные из ячеек с этим классом

Сделал выбор картинки и вывод сообщения в одном скрипте:

<script>
	var x=false;
  	function imgchange(obj) {
   		if  (x){
  			obj.src="free.png";
   		} else {
   			obj.src="ok.png";
   			alert("Row is: "+ obj.parentNode.parentNode.rowIndex + "\nCell is: " + obj.parentNode.cellIndex);
   		}
   		x=!x;
 	}
</script>

Но вот почему-то баг с не однократным нажатием остался=(
Из-за чего он может возникать?

Для примера: [3,6] я выделяю 1 кликом, после чтоб выделить [3,7] мне надо будет нажать туда раза 2-3 и только после этого сработает смена картинки. Так же будет и с [4,6] и тд. Если я захочу снять выделение, то опять же надо будет нажать 2 раза на него. Однако стоит мне сначала выбрать [3,6] и потом снять с него выделение, то это всё происходит в 1 клик.

А можно чуть подробнее про класс? Его в jsp оформлять?
Я думал может быть можно как-либо в скрипт дописать ещё создание к примеру вот такой строки:

<input type="hidden"  value="Сюда вставлять данные о ряде и месте">

толком не знаешь нативный js, юзай jquery ;)
покликай на ячейках, потом возьмёшь данные из нужных ячеек и отошлёшь ajax-м

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.green {
	background-color: green;
}
td {
	border: solid 1px;
}
</style>
<table class="table">
	<tr>
		<td>11</td>
		<td>12</td>
	</tr>
	<tr>
		<td>21</td>
		<td>22</td>
	</tr>
</table>
<script>
jQuery(function ($) {
	$(".table").on("click", "td", function (e) {
		$(e.target).toggleClass("green");
		alert($(".green").size());
	});
})
</script>

Цитата:

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

толком не знаешь нативный js, юзай jquery
покликай на ячейках, потом возьмёшь данные из нужных ячеек и отошлёшь ajax-м

Я же писал, что с js не дружу=( Да jquery тоже не лучший друг
Код, который написали вы работает, но он отмечает всё подряд, а не только те места, которые свободны. И там меняется цвет, а мне бы хотелось чтоб менялось на картинку.
Сейчас почитаю про Ajax

Цитата:

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

Код, который написали вы работает, но он отмечает всё подряд, а не только те места, которые свободны

не ты ли хотел по клику выбирать место, один клик - выбрал, второй - снял выбор
поставь условие, чтобы занятые места не выбирались

Цитата:

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

И там меняется цвет, а мне бы хотелось чтоб менялось на картинку.

проблемы в этом нет, я дал тебе пример-каркас, где есть и event.target и использование класса (сам спрашивал с чем это едят)

Цитата:

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

Я же писал, что с js не дружу=( Да jquery тоже не лучший друг

без этих знаний тебе задачу самому всё равно не решить, поэтому придётся подружиться, либо не решать задачу на клиенте (использовать что-нибудь типа jsf)

bes,
Я всё никак не могу понять как менять картинку при клике=( Я не могу понять как добраться до src у img.
В данный момент я только дошёл до момента, когда получаю значения ряда и места, но мне кажется, что код не правильный=(
Код:

jQuery(function ($) {
	$(".table").on("click", "td", function (e) {
		var $tar = $(e.target);
		var $td = $tar.parents('td:first');
		var $tr = $td.parents('tr:first');
		var place = $tr.children().index($td);
		var row = $tr.index();
		var data = $td.html();
		//if (???) { //тут в будущем будет условие при котором следует менять картинку
			$tar.toggleClass("green");
			alert($(".green").size() + "; Place = " + place + "; Row = " + row + "; Data = " + data);
		//}
	});
});

хотя бы так, если картинка фоном, если нет, получить ссылку на картинку -> изменить src

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.green {
	background: url("http://javascript.ru/forum/image.php?u=19820&dateline=1334914235");
}
td {
	border: solid 1px;
	width: 50;
	height: 50;
	background: url("http://javascript.ru/forum/images/ca_serenity/misc/logo.gif");
}
</style>
<table class="table">
	<tr>
		<td>11</td>
		<td>12</td>
	</tr>
	<tr>
		<td>21</td>
		<td>22</td>
	</tr>
</table>
<script>
jQuery(function ($) {
	$(".table").on("click", "td", function (e) {
		$(e.target).toggleClass("green");
		alert($(this).text());
	});
})
</script>

сделай тестовый пример, возможность запуска [html run]

Вот сделал наконец. Теперь осталось ~~взять данные Row и Place и загонять их в массив, когда отмечается место~~ и убирать данные из массива когда отметка снимается.
В данный момент я знаю, что данные добавляются в массивы, но почему-то не хотят оттуда удаляться=(
Вот такой вид имеет сейчас код:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
		<title>Tickets ordered</title>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  		<script>
		var rows = [];
		var places = [];
		var count = 0;
		jQuery(function ($) {
			$(".table").on("click", "td", function (e) {
				var $tar = $(e.target);
				var $td = $tar.parents('td:first');
				var $tr = $td.parents('tr:first');
				var place = $tr.children().index($td);
				var row = $tr.index();
				var data = $td.children();
				var srcImg = $tar.attr('src');
				if (srcImg == "http://javascript.ru/forum/attachment.php?attachmentid=1855&stc=1&d=1373743035"){
					$tar.attr('src', 'http://javascript.ru/forum/attachment.php?attachmentid=1856&stc=1&d=1373743035');
					rows[count] = row;
					places[count]= place;
					alert("Place = " + place + "; Row = " + row + "; Data = " + srcImg);
					alert(rows[count] + "|" + places[count] + "|" + count);
					count++;
				}
				if (srcImg == "http://javascript.ru/forum/attachment.php?attachmentid=1856&stc=1&d=1373743035"){
					$tar.attr('src', 'http://javascript.ru/forum/attachment.php?attachmentid=1855&stc=1&d=1373743035');
					for (var i=0;i<rows.lenght;i++){
						if (rows[i]==row && places[i]==place){
							alert(rows[i] + "|" + places[i]);
							rows[i]=null;
							places[i]=null;
						}
					}
					count--;
				}
			});
		});
	</script>
  	</head>
</html>
	<body>
		<form method="post" action="<c:url value='/order?idPlay=${idPlay}&idDate=${idDate}'/>">
			<div style="background: url(http://javascript.ru/forum/attachment.php?attachmentid=1857&stc=1&d=1373742596) no-repeat top left;">
			<br><br><br>
				<div style="margin-left: 55px">
					<TABLE class="table">
						<TR>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1854&stc=1&d=1373743035'></TD>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1855&stc=1&d=1373743035'></TD>
						</TR>
						<TR>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1854&stc=1&d=1373743035'></TD>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1855&stc=1&d=1373743035'></TD>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1855&stc=1&d=1373743035'></TD>
						</TR>
						<TR>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1855&stc=1&d=1373743035'></TD>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1854&stc=1&d=1373743035'></TD>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1855&stc=1&d=1373743035'></TD>
							<TD><img src='http://javascript.ru/forum/attachment.php?attachmentid=1855&stc=1&d=1373743035'></TD>
						</TR>
					</TABLE>
				</div>
			</div>
			<input type="submit" value="Ordered">
		</form>
	</body>
</html>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.table {
	background-color: rgb(250, 250, 250);
}
.table td {
	border: outset 2px ;
	min-width: 40px;
	min-height: 40px;
}
.table td div {
	text-align: right;
}
.table td div:first-child {
	text-align: left;
}
.not-selectable {
	background: url("http://javascript.ru/forum/attachment.php?attachmentid=1854&stc=1&d=1373743035") no-repeat center center;
}
.selected {
	background: url("http://javascript.ru/forum/attachment.php?attachmentid=1856&stc=1&d=1373743035") no-repeat center center;
}
</style>
<button class="send">send</button>

<script>
jQuery(function ($) {
	var str = "<table class=\"table\">";
	for (var i = 1; i <= 7; i++) {
		str += "<tr>";
		for (var j = 1; j <= 10; j++) {
			str += "<td><div>" + i + "</div><div>" + j + "</div></td>";
		}
		str += "</tr>";
	}
	str += "</table>";
	$("body").prepend(str);
	var table = $(".table").get(0);
	table.rows[0].cells[0].className = "not-selectable";
	table.rows[2].cells[3].className = "not-selectable";
	table.rows[3].cells[5].className = "not-selectable";
	
	$(".table").on("click", "td", function () {
		if (this.className != "not-selectable") {
			$(this).toggleClass("selected");
		}
	});
	$(".send").on("click", function () {
		var str="data=";
		$.each($("td.selected"), function() {
			str += this.parentNode.rowIndex + "," + this.cellIndex + ";";
		});
		alert(str);
		$.ajax({
			type: "POST",
			url: "your.php",
			data: str
		});
	});
});
</script>

bes,
Спасибо огромное, взял часть кода=)
Но теперь не могу выловить в контроллере то, что отправил ajax
В контроллере пишу пытаюсь принять данные так:

String str = request.getParameter("str");

и потом пытаюсь отправить эту строку на страницу так:

request.setAttribute("str", str);

и ничего не выводит=(

параметр у меня назывался data
вывод в jsp: out.print(request.getParameter("data"));