Множественный выбор.
Здравствуйте, из-за почти полного незнания 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 никуда. А может и вовсе есть готовые варианты для такого множественного выбора? |
Я не совсем понятно написал в этом плане.
Будет постоянное, просто пока нет точной цифры, 6 или 7 элементов. |
выборка ячеек в строках таблицы
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>
|
Большое спасибо, работает отлично, только я так понял не учитывается id строки, то есть в конечном итоге будет непонятно к какой строке привязан выбор, можете переделать в двумерный массив или строку вида?:
[id] - [data-select], [id] - [data-select], ...... либо как-то иначе, чтоб легко было распарсить потом. Попробовал бы сам переделать, но думаю мало что получится, для меня некоторые части синтаксиса в вашем коде как китайская грамота). |
Цитата:
|
Ну я же написал что в любом случае нужен javascript.
У чекбокса вроде нет прявязок как У радиокнопок, в свою очередь радиокнопки не позволяют отменить уже сделанный выбор. Более того эти элементы нужно изменять под тот вид что я описал. В итоге получается довольно громоздкая глючная штука, где не всегда срабатывает нажатие. |
Цитата:
|
Хорошо, я сделаю чекбоксы, каким образом я буду отслеживать только один выбор в одной строке? Тут тебе не поможет одинаковый name="" как у радиокнопок. Но это еще ладно, тут наверно можно выйти из положения парой строк js, но потом нужно превратить эту кнопку в прямоугольник заполняющий ячейку таблицы и поверх еще текст + смена фона, я пробовал сделать это силами css, получалась глючная штука, с кучей костылей. Куда лучше один js файл который выдает ясный и понятный результат без лагов и т.п.
|
Цитата:
|
Цитата:
<?
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>
Проверяйте. |
| Часовой пояс GMT +3, время: 00:40. |