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

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

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

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

Hisot

10.07.2013 16:46

Заполнение таблицы

Всем привет помогите реализовать заполнение таблицы. Уже который день сижу и ломаю голову как это сделать. С js знаком мало.
Проблема:
В бд есть таблица содержащая занятые места в зале (ряд и место). Надо эти места взять и перенести на jsp-страницу. На jsp есть картинка со схемой зала. Поверх картинки рисуется таблица в ячейки которой вставляются картинки обозначающие занятое (красный крест) или свободное место (просто прозрачная картинка).
В общем как уже говорил надо показать какие места заняты. Пытался сделать без js, но не получается позиционироваться в таблице. Поэтому прошу помощи тут.
Вот пример того, как это должно выглядеть:

animhotep

10.07.2013 16:52

а вопрос в чём?)

Цитата:

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

не получается позиционироваться в таблице

её можно строить на js попутно отмечая занята ли ячейка (место)

Hisot

10.07.2013 17:01

Цитата:

Сообщение от animhotep (Сообщение 261599)

а вопрос в чём?)

её можно строить на js попутно отмечая занята ли ячейка (место)

Ну вот как её строить мне и надо понять. Дело даже не в построении, а скорее в условиях при заполнении данными.
Я сейчас пытаюсь построить таблицу и заполнить её на основании вот этой статьи - https://developer.mozilla.org/en-US/...M_I nterfaces
но что-то не получается сделать так, чтоб если место занято, то выдавало одно, а если свободно, то другое=(

animhotep

10.07.2013 17:40

хороший пример по ссылке, а данные о том занято ли место у вас в каком виде
можете передать их в виде масива? например
0,0,0,1,1
0,1,1,0,1

Hisot

10.07.2013 17:53

Цитата:

Сообщение от animhotep (Сообщение 261618)

на картинке в первом посте они показаны, т.е. в бд они хранятся в виде двух полей row и place. Потом из бд считываю всё в коллекцию, сортирую её и передаю на jsp.
Это же какой массив получится. уж слишком громадный

Кстати как уже на jsp когда я пишу скрипт мне в него закинуть свою коллекцию?
И как сделать так чтоб функция отрабатывала сразу же, а не по нажатию на кнопку (как примере по ссылке выше)

animhotep

10.07.2013 18:04

так а что ты передаёшь в шаблон если не массив? приведи пару строк
чтоб отработала сразу - просто ставишь скрипт в конце страници, перед </body>

Hisot

10.07.2013 18:11

Цитата:

Сообщение от animhotep (Сообщение 261627)

у меня сейчас такой код:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="by.gsu.epamlab.Constants" %>
<%@page import="org.json.simple.JSONObject"%>
  
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
		<title>Tickets ordered</title>
		<script>
			function generate_table(places){
				var rows = 7; 
				var cells = 10;
				var body = document.getElementsByTagName("body")[0];
				var table     = document.createElement("table");
				var tableBody = document.createElement("tbody");
				for (var j = 0; j < rows; j++) {
    				var row = document.createElement("tr");
    				for (var i = 0; i < cells; i++) {
        				var cell = document.createElement("td");
        				for (var p=0; p<places.size; p++) {
        					var cellText = document.createTextNode("Row: " + j + ", Place: " + i);
        					cell.appendChild(cellText);
       						row.appendChild(cell);
        				}
    				}
    				tableBody.appendChild(row);
				}
				table.appendChild(tableBody);
				body.appendChild(table);
			}
		</script>
	</head>
	<body>
		<c:if test="${not empty errorMessage}">
			<c:out value="${errorMessage}"/>
		<hr>
		</c:if>
		<%@ include file="header.jsp" %><br>
		<%@ include file="headerOrder.jsp" %><br><br>
		<c:choose>
			<c:when test="${empty user}">
				Your status Guest, please <a href="<c:url value='/login'/>">Sign in</a>. ${id}<br>
				<img name = 'place' src = 'hallplan.jpg' />
			</c:when>
			<c:otherwise>
			<c:set var="space" value="&emsp;"/>
			<c:set var="cancel" value="<img src='cancel.png'>"/>
			<c:set var="free" value="<img src='free.png'>"/>
			There will be order ${user.name}<br>
						
			<div style="background: url(hallplan.jpg) no-repeat top left;">
			<br><br><br>
				<div style="margin-left: 55px">
					<input type="button" value="Generate a table." onclick="generate_table(${places})">
				</div>	
			</div>
			
			row place<br>
			<c:forEach var="places" items="${places}">
				${places.row} ${space} ${places.place}<br>
			</c:forEach>
		</c:otherwise>
		</c:choose>
	</body>
</html>

а передаю я коллекцию такой структуры:

Код:

        private int id;

        private int row;

        private int place;

        private int categoryId;

        private int playId;

        private int dateId;

animhotep

10.07.2013 18:19

не всё понимаю в там коде, но попробуй так
замени циклы js на циклы jsp то есть перед </body> выводишь чтот типа

<script>
 <c:forEach  items="${row}">//перебираем ряды
 var row = document.createElement("tr");
   <c:forEach  items="${place}">//перебираем ячейки
   var cell = document.createElement("td");

   var cellText = document.createTextNode(выводим значение занято/нет);
   cell.appendChild(cellText);
   row.appendChild(cell);

ну итд, по аналогии

Hisot

10.07.2013 18:40

Цитата:

Сообщение от animhotep (Сообщение 261632)

не всё понимаю в там коде, но попробуй так
замени циклы js на циклы jsp то есть перед </body> выводишь чтот типа

<script>
 <c:forEach  items="${row}">//перебираем ряды
 var row = document.createElement("tr");
   <c:forEach  items="${place}">//перебираем ячейки
   var cell = document.createElement("td");

   var cellText = document.createTextNode(выводим значение занято/нет);
   cell.appendChild(cellText);
   row.appendChild(cell);

ну итд, по аналогии

У меня таблицу выводит только если я ничего не трогаю от исходного кода=(

<script>
	function generate_table(){
		var rows = 7; 
		var cells = 10;
		var body = document.getElementsByTagName("body")[0];
		var table     = document.createElement("table");
		var tableBody = document.createElement("tbody");
		for (var j = 0; j < rows; j++) {
    			var row = document.createElement("tr");
    				for (var i = 0; i < cells; i++) {
        				var cell = document.createElement("td");
        				var cellText = document.createTextNode("Row: " + j + ", Place: " + i);
        				cell.appendChild(cellText);
       					row.appendChild(cell);
    				}
    			tableBody.appendChild(row);
		}
		table.appendChild(tableBody);
		body.appendChild(table);
	}
</script>

Стоит мне прописать что-то как уже таблицу не выводит
Я не могу понять как мне внутри этого скрипта работать с коллекцией

animhotep

10.07.2013 18:42

чёт я туплю под вечер. а зачем тебе аобще js там же всё в переменных шаблона есть
делай таблицу средствами jsp да и всё

Hisot

10.07.2013 18:47

Цитата:

Сообщение от animhotep (Сообщение 261638)

а затем, что я не знаю как сделать так чтоб оно взяв место и ряд вставило именно на своё место картинку. У меня вот что-то в голове не складывается как подобрать условия чтоб всё получилось.
Если бы конечно вместо пустых мест к примеру стоят 0, то было бы проще, но опять же как отловить это в коллекции и вставить на нужные места 0, тоже не очень получается придумать=(

animhotep

10.07.2013 18:54

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

Hisot

10.07.2013 19:05

Вложений: 1

Цитата:

Сообщение от animhotep (Сообщение 261643)

Два цикла нужны для прорисовки всех ячеек, но нужен ещё цикл чтоб проходить по коллекции, а если его добавлять, то таблица будет вылазить за пределы картинки тк слишком много циклов.
И я хз какое условие вставить чтоб он поставило картинку, мол место занято.
Вот примерно как это всё должно выглядеть, но в итоге если такое запустить, то получится как на картинке ниже. Хотя последнее место в первом ряду должно находится на месте №7, а не №5

<TABLE>
	<tbody>
		<c:forEach var="r" begin="1" end="7">
			<TR>
				<c:forEach var="p" begin="1" end="10">
					<c:forEach var="places" items="${places}">
						<c:if test="${places.place==p and places.row==r}">
							<TD>${cancel}</TD>
						</c:if>
					</c:forEach>
				</c:forEach>
			</TR>	
		</c:forEach>
	</tbody>
</TABLE>

Вот почти правильный цикл, но он оно отрабатывает больше чем надо=( и поэтому всё получается криво=(

<TABLE>
	<tbody>
		<c:forEach var="r" begin="1" end="7">
			<TR>
				<c:forEach var="p" begin="1" end="10">
					<c:forEach var="places" items="${places}">
						<c:choose>
							<c:when test="${places.place==p and places.row==r}">
								<TD>${cancel}</TD>
							</c:when>
							<c:otherwise>
								<TD>${free}</TD>
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</c:forEach>
			</TR>
		</c:forEach>
	</tbody>
</TABLE>

bes	10.07.2013 22:11

один цикл должен быть по строкам (tr), внутри него второй цикл по ячейкам (td), любой другой цикл не должен добавлять не лишних td, не лишних tr

bes	10.07.2013 23:05

ладно, не мучайся, если не понял, о чём я: <td> должен быть непосредственно во втором по вложенности цикле, а само содержимое этого td выводиться в третьем по вложенности цикле

Hisot

11.07.2013 02:24

Спасибо всем, кто откликнулся и помог! Реализовал таки это штуку.

Теперь на повестке дня у меня другой вопрос. Как сделать так, что выбирая свободные места в зале, по нажатию на них, брался ряд и место?
В данный момент я реализовал только по нажатию смену картинки.

Подтолкните в какую сторону развивать идею, чтоб оно взяло значения [3,6] [3,7] [4,6] [4,7]. Потом эти значения надо будет передать в сервлет.

animhotep

11.07.2013 13:35

индексы можно взять
http://www.w3schools.com/jsref/prop_..._cellindex.asp
http://www.w3schools.com/jsref/prop_...w_rowindex.asp

bes	11.07.2013 19:06

Цитата:

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

Как сделать так, что выбирая свободные места в зале, по нажатию на них, брался ряд и место?
В данный момент я реализовал только по нажатию смену картинки.

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

Hisot

11.07.2013 20:38

Цитата:

Сообщение от animhotep (Сообщение 261753)

индексы можно взять
http://www.w3schools.com/jsref/prop_..._cellindex.asp
http://www.w3schools.com/jsref/prop_...w_rowindex.asp

Спасибо за наводку=)

Цитата:

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

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

Оке, гляну сейчас=)
В данный момент смена происходит по этому скрипту:

<script>
	var x=false;
	function imgchange(obj,imgX,imgY) {
   		if  (x){
  			obj.src=imgX;
   		} else {
   			obj.src=imgY;
   		}
  		x=!x;
 	}
</script>

Но приходится почему-то нажимать не 1 раз, а 2 если выбираю другую картинку. По одной картинке всё нормально делает.
Сейчас почитаю про event.target и буду думать как реализовать чтоб при выборе места создавало какое-либо скрытое поле и туда записывало ряд и место, а при снятии выделения убирало эту строку.

bes	11.07.2013 21:43

Цитата:

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

а при снятии выделения убирало эту строку.

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

Hisot

11.07.2013 22:06

Цитата:

Сообщение от 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="Сюда вставлять данные о ряде и месте">

bes	11.07.2013 22:48

толком не знаешь нативный 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>

Hisot

11.07.2013 23:44

Цитата:

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

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

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

bes	12.07.2013 18:05

Цитата:

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

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

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

Цитата:

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

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

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

Цитата:

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

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

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

Hisot

13.07.2013 20:45

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);
		//}
	});
});

bes	13.07.2013 21:19

хотя бы так, если картинка фоном, если нет, получить ссылку на картинку -> изменить 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]

Hisot

13.07.2013 23:28

Вложений: 4

Вот сделал наконец. Теперь осталось ~~взять данные 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>

bes	14.07.2013 12:52

<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>

Hisot

14.07.2013 18:57

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

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

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

request.setAttribute("str", str);

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

bes	14.07.2013 19:23

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

Hisot

14.07.2013 23:26

Цитата:

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

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

Прописываю такое в jsp и мне пишет null всё время.
Я уже море информации перерыл, но всё никак не могу найти как отловить эти данные в контроллере=(

bes	15.07.2013 19:00

Цитата:

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

Прописываю такое в jsp и мне пишет null всё время.

где пишет? опиши как принимаешь ответ

обычный текст выводит?

Hisot

15.07.2013 19:53

Цитата:

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

где пишет? опиши как принимаешь ответ
обычный текст выводит?

Уже разобрался как сделать как мне надо=)
Вот, что получилось:

$(".send").on("click", function () {
	var str="";
	$.each($("td.selected"), function() {
		str += this.parentNode.rowIndex + "," + this.cellIndex + ";";
	});
	if (str != ""){
		alert(str);
		var form = $('<form action="/jeeProject/ordercom"></form>');
		$('<input type="hidden" />').attr({name: 'data', value: str}).appendTo(form);
		form.appendTo(document.body);
		form.submit();
	} else {
		alert("Please select place");
	}
});

Я теперь могу нормально передавать в контроллер все нужные мне данные. В контроллере буду добавлять в базу данных новые значения.

bes	15.07.2013 21:16

чем ajax не угодил

Часовой пояс GMT +3, время: 05:28.