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

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

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

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

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

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

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

Цитата:

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

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

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

Цитата:

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

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

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

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

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

Цитата:

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

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

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

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

Цитата:

Сообщение от 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;

не всё понимаю в там коде, но попробуй так
замени циклы 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);

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

Цитата:

Сообщение от 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>

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

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