Множественный выбор.
Здравствуйте, из-за почти полного незнания 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>
Проверяйте. |
Скажем так, сервак хранит строки для которых нужен выбор. Юзер заходит на страницу, и пока делает свой выбор, сервак убирает 1 строку и добавляет новую. Юзер жмет кнопку готово, и все его выборы съезжают и переходят на другие строки.
|
Цитата:
а Юзер жмет кнопку готово, и все его выборы съезжают и переходят на другие строки. , тогда что? И если тут задействованы асинхронные запросы, то это все равно не означает, что нужно использовать хрен знает что вместо того, что для этого уже есть. Вам не кажется что у вас логика в решении задачи хромает? |
Цитата:
Цитата:
[0]-Петя (1)(2)(3) [1]-Вася (1)(2)(3) Пока юзер определяется, сервак считает что строка [0]-Петя больше не актуальна и он её отключает тригером/или удаляет. И добаляет новую строку Коля, получется сервер ожидает данные уже для: [0]-Вася (1)(2)(3) [1]-Коля (1)(2)(3) Это я к тому что использовать индексы массива [0][1][2] вместо конкретных id строк не очень хорошая идея. Цитата:
|
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"),
obj = {};
[].forEach.call(trs, function(tr, i) {
var user = tr.dataset.user
obj[user] = 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")
}
obj[user] = td.classList.contains("select") ? data : 0;
document.querySelector("p").innerHTML = JSON.stringify(obj);
})
})
});
document.querySelector("p").innerHTML = JSON.stringify(obj);
});
</script>
</head>
<body>
<p></p>
<table>
<tr data-user="Петя">
<td data-select="1">1</td>
<td data-select="2">2</td>
<td data-select="3">3</td>
</tr>
<tr data-user="Вася">
<td data-select="1">1</td>
<td data-select="2">2</td>
<td data-select="3">3</td>
</tr>
</table>
</body>
</html>
|
Цитата:
Код:
[as] => ArrayНет, я не против того, что вы решили вместо естественного наворотить искусственного. А рони парень умный, оперативный (он живет на форуме, в каком-то разделе, на раскладушке :) ), он вам и тысячу решений напишет. Да за ради бога, охота граблями лужи разгонять, пожалуйста. Заметьте, что я "вклинился" в беседу джентльменов не по поводу "граблей", а по поводу "связать". И чтобы впредь не нарушать этот диалог, последнее замечание: Цитата:
<table>
<tr>
<td><input id="chk0" type="checkbox" name="as[12045][0]" /><label for="chk0">Text</label></td>
<td><input id="chk1" type="checkbox" name="as[12045][1]" /><label for="chk1">Text</label></td>
<td><input id="chk2" type="checkbox" name="as[12045][2]" /><label for="chk2">Text</label></td>
</tr>
<tr>
<td><input id="chk3" type="checkbox" name="as[29356][0]" /><label for="chk3">Text</label></td>
<td><input id="chk4" type="checkbox" name="as[29356][1]" /><label for="chk4">Text</label></td>
<td><input id="chk5" type="checkbox" name="as[29356][2]" /><label for="chk5">Text</label></td>
</tr>
<tr>
<td><input id="chk6" type="checkbox" name="as[40008][0]" /><label for="chk6">Text</label></td>
<td><input id="chk7" type="checkbox" name="as[40008][1]" /><label for="chk7">Text</label></td>
<td><input id="chk8" type="checkbox" name="as[40008][2]" /><label for="chk8">Text</label></td>
</tr>
</table>
а по примеру выбора получим Код:
[as] => ArrayДаже скажу больше - я могу для столбцов использовать индексы, а не ассоциацию, и в этом нет ни какого усложнения, это наоборот может быть выгода, а связать их с полями таблицы, ну так поля таблицы, это ведь индексы в наборе, для связи требуется всего-то использовать функцию пересечения массивов, и получим только те, что выбраны. Вы утверждаете, что использовать форму, это сложно, а куда проще наворотить, а потом решать проблемы. Вот и думаешь, а где же логика. |
| Часовой пояс GMT +3, время: 11:39. |