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:13
|
|
Новичок на форуме
|
|
Регистрация: 16.06.2016
Сообщений: 7
|
|
|
Я не совсем понятно написал в этом плане.
Будет постоянное, просто пока нет точной цифры, 6 или 7 элементов.
|
|
16.06.2016, 15:39
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
выборка ячеек в строках таблицы
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,108
|
|
|
Сообщение от armolov
|
|
то есть в конечном итоге будет непонятно к какой строке привязан выбор
|
опачки!!! чем вам индекс массива то не угодил??? |
|
16.06.2016, 18:32
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от armolov
|
|
я сделаю чекбоксы, каким образом я буду отслеживать только один выбор в одной строке?
|
<?
if($_POST) {
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
label {
display: block;
}
input[type="checkbox"] {
display: none;
}
input:checked + label {
background: #ccc;
}
</style>
</head>
<body>
<form method="post">
<table>
<tr>
<td><input id="chk0" type="checkbox" name="as[0][0]" /><label for="chk0">Text</label></td>
<td><input id="chk1" type="checkbox" name="as[0][1]" /><label for="chk1">Text</label></td>
<td><input id="chk2" type="checkbox" name="as[0][2]" /><label for="chk2">Text</label></td>
</tr>
<tr>
<td><input id="chk3" type="checkbox" name="as[1][0]" /><label for="chk3">Text</label></td>
<td><input id="chk4" type="checkbox" name="as[1][1]" /><label for="chk4">Text</label></td>
<td><input id="chk5" type="checkbox" name="as[1][2]" /><label for="chk5">Text</label></td>
</tr>
<tr>
<td><input id="chk6" type="checkbox" name="as[2][0]" /><label for="chk6">Text</label></td>
<td><input id="chk7" type="checkbox" name="as[2][1]" /><label for="chk7">Text</label></td>
<td><input id="chk8" type="checkbox" name="as[2][2]" /><label for="chk8">Text</label></td>
</tr>
</table>
<button>Send</button>
</form>
</body>
</html>
Проверяйте.
|
|
|
|
