16.06.2016, 14:58
|
|
Новичок на форуме
|
|
Регистрация: 16.06.2016
Сообщений: 7
|
|
|
Множественный выбор.
Здравствуйте, из-за почти полного незнания javascript обращаюсь за помощью к вам. Цель следующая: есть таблица:
<table>
<tr>
<td id="1" data-select="1">1</td>
<td id="1" data-select="2">2</td>
<td id="1" data-select="3">3</td>
</tr>
<tr>
<td id="2" data-select="1">1</td>
<td id="2" data-select="2">2</td>
<td id="2" data-select="3">3</td>
</tr>
<table>
Число строк может меняться. Число столбцов постоянное значение. Каждая ячейка таблицы представляет собой элемент выбора. В каждой строке можно выбрать только 1 из N элементов, либо не выбирать ничего. Выбор осуществляется нажатием на ячейку, и показывается допустим сменой фона ячейки. Все что навыбирал юзер должно сохраняться в массив или как-то еще, чтоб по нажатию кнопки сохранить, эти данные отправить на другую страницу, где средствами php уже будут происходить манипуляции с этими данными. Также если юзер захочет изменить свои выборы, это нужно будет как-то подгрузить с тем что юзер уже выбрал до этого.
Были мысли запихнуть чекбоксы в каждую ячейку и изменить их вид, но и тут без javascript никуда.
А может и вовсе есть готовые варианты для такого множественного выбора?
|
|
16.06.2016, 15:09
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Сообщение от armolov
|
|
В каждой строке можно выбрать только 1 из N элементов, либо не выбирать ничего.
|
N разве не равен постоянному числу столбцов? |
|
16.06.2016, 15:13
|
|
Новичок на форуме
|
|
Регистрация: 16.06.2016
Сообщений: 7
|
|
|
Я не совсем понятно написал в этом плане.
Будет постоянное, просто пока нет точной цифры, 6 или 7 элементов.
|
|
16.06.2016, 15:39
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
выборка ячеек в строках таблицы
armolov,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.select{
background-color: #228B22;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var trs = document.querySelectorAll("tr"),
arr = [];
[].forEach.call(trs, function(tr, i) {
arr[i] = 0;
var tds = tr.querySelectorAll("td");
var temp;
[].forEach.call(tds, function(td, a) {
var data = td.dataset.select;
td.addEventListener("click", function() {
if (temp == td) td.classList.toggle("select");
else {
temp && temp.classList.remove("select");
temp = td;
td.classList.add("select")
}
arr[i] = td.classList.contains("select") ? data : 0;
document.querySelector("p").innerHTML = arr
})
})
});
document.querySelector("p").innerHTML = arr
});
</script>
</head>
<body>
<p></p>
<table>
<tr>
<td data-select="1">1</td>
<td data-select="2">2</td>
<td data-select="3">3</td>
</tr>
<tr>
<td data-select="1">1</td>
<td data-select="2">2</td>
<td data-select="3">3</td>
</tr>
</table>
</body>
</html>
|
|
16.06.2016, 16:27
|
|
Новичок на форуме
|
|
Регистрация: 16.06.2016
Сообщений: 7
|
|
|
Большое спасибо, работает отлично, только я так понял не учитывается id строки, то есть в конечном итоге будет непонятно к какой строке привязан выбор, можете переделать в двумерный массив или строку вида?:
[id] - [data-select], [id] - [data-select], ......
либо как-то иначе, чтоб легко было распарсить потом.
Попробовал бы сам переделать, но думаю мало что получится, для меня некоторые части синтаксиса в вашем коде как китайская грамота).
|
|
16.06.2016, 17:28
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от armolov
|
|
в конечном итоге будет непонятно к какой строке привязан выбор, можете переделать в двумерный массив или строку вида?
|
Ну а почему вы не используете checkbox, именование которых и будет описывать набор, а отправленная форма без всякого промежуточного формирования массива передаст его серверу? |
|
16.06.2016, 17:47
|
|
Новичок на форуме
|
|
Регистрация: 16.06.2016
Сообщений: 7
|
|
|
Ну я же написал что в любом случае нужен javascript.
У чекбокса вроде нет прявязок как У радиокнопок, в свою очередь радиокнопки не позволяют отменить уже сделанный выбор. Более того эти элементы нужно изменять под тот вид что я описал. В итоге получается довольно громоздкая глючная штука, где не всегда срабатывает нажатие.
|
|
16.06.2016, 18:01
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от armolov
|
|
У чекбокса вроде нет прявязок как У радиокнопок, в свою очередь радиокнопки не позволяют отменить уже сделанный выбор.
|
Чего? Ну что вы несете, подумайте сперва, чекбоксы как раз для того, чтобы сделать множественный выбор и не нужны никакие JS для этого, а вот элементы не предназначенные для этого плюс JS, это как раз и есть "громоздкая и глючная штука". |
|
16.06.2016, 18:20
|
|
Новичок на форуме
|
|
Регистрация: 16.06.2016
Сообщений: 7
|
|
|
Хорошо, я сделаю чекбоксы, каким образом я буду отслеживать только один выбор в одной строке? Тут тебе не поможет одинаковый name="" как у радиокнопок. Но это еще ладно, тут наверно можно выйти из положения парой строк js, но потом нужно превратить эту кнопку в прямоугольник заполняющий ячейку таблицы и поверх еще текст + смена фона, я пробовал сделать это силами css, получалась глючная штука, с кучей костылей. Куда лучше один js файл который выдает ясный и понятный результат без лагов и т.п.
|
|
16.06.2016, 18:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Сообщение от armolov
|
|
то есть в конечном итоге будет непонятно к какой строке привязан выбор
|
опачки!!! чем вам индекс массива то не угодил??? |
|
|
|
