|
| |
|
|
| |
для: confirm
(24.05.2012 в 21:35)
| | | Огромное спасибо!!! | |
| |
|
|
| |
|
|
| |
для: andrew883
(24.05.2012 в 21:02)
| | | В Лисе? Это потому, что у вас в таблице текст содержит переходы на новую строку, а в текстах опций нет, следовательно при сравнении такие значения определяются неравными. Кроме этого, Лиса по умолчанию подставит в качестве значения опций их текст, если не указать иного (упустил я из виду это). Перепишите так:
<html>
<head>
<style type="text/css">
#sched {
color: #000;
font: 9pt Arial;
}
#sched th {
background: #BDBDBD;
}
</style>
<script>
var sl;
function in_array(k, a) {
for (key in a) {
if (a[key] == k.replace(/^\s+|\s+$|\r\n/g,"")) return true;
}
return false;
}
function selectSubjects(e, c) {
sl = [];
for(var i=0; i<e.length; i++)
if(e.options[i].selected) {
if(c && e.value) sl.push(e.options[i].text);
else e.options[i].selected = false;
}
}
function setFilter(m) {
if(!sl.length && !m) return false;
var t = document.getElementById("sched");
var c = t.rows[0].cells.length;
for (var i = 1; i <t.rows.length; i++) {
for (var k = 1; k<c; k++)
t.rows[i].cells[k].style.color = m ? '#000' :
(in_array(t.rows[i].cells[k].innerHTML, sl)
? '#000' : '#DDD');
}
document.getElementById('subj').size=1;
selectSubjects(document.getElementById('subj'));
}
</script>
</head>
<body>
<table id="sched">
<tbody>
<tr>
<th>
</th>
<th>
Пон</th>
<th>
Втр</th>
<th>
Срд</th>
<th>
Чтв</th>
<th>
Птн</th>
<th>
Суб</th>
</tr>
</tbody>
<tbody>
<tr>
<th>
8.00</th>
<td>
Математика </td>
<td>Физика</td>
<td>Русский язык</td>
<td>История</td>
<td>Литература</td>
<td>Физкультура</td>
</tr>
<tr>
<th>
9.00</th>
<td>Геоментрия</td>
<td>Иностранный язык</td>
<td>Физкультура</td>
<td>Математика</td>
<td>Физика</td>
<td>Черчение</td>
</tr>
<tr>
<th>
10.00</th>
<td>Физкультура</td>
<td>Математика</td>
<td>Черчение</td>
<td>Русский язык</td>
<td>Иностранный язык</td>
<td>Физика</td>
</tr>
</tbody>
</table>
<p>
<select id="subj" multiple="multiple"
onchange="selectSubjects(this, 1)"
onfocus="this.size = 10" size="1">
<option value="">Выберите предмет/предметы...</option>
<option value="1">Математика</option>
<option value="1">Физика</option>
<option value="1">Русский язык</option>
<option value="1">История</option>
<option value="1">Иностранный язык</option>
<option value="1">Черчение</option>
<option value="1">Физкультура</option>
<option value="1">Геоментрия</option>
<option value="1">Литература</option>
</select>
<input onclick="setFilter()" type="button" value="Фильтровать" />
<input onclick="setFilter(1); selectSubjects(document.getElementById('subj'))"
type="button" value="Сбросить" /></p>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: confirm
(24.05.2012 в 20:51)
| | | Переписал эффект тот же
Не нужно ли в таблице как то связать значения в таблице со значениями в списке? | |
| |
|
|
| |
|
|
| |
для: andrew883
(24.05.2012 в 20:34)
| | | Добавить первой строкой не означает написать ее вне тела функции. Перепишите:
function setFilter(m) {
if(!sl.length && !m) return false;
var t = document.getElementById("sched");
var c = t.rows[0].cells.length;
for (var i = 1; i <t.rows.length; i++) {
for (var k = 1; k<c; k++)
t.rows[i].cells[k].style.color = m ? '#000' :
(in_array(t.rows[i].cells[k].innerHTML, sl)
? '#000' : '#DDDDDD');
}
document.getElementById('subj').size=1;
selectSubjects(document.getElementById('subj'));
}
|
Я убрал и привязку к <tbody> - просто счет строк начинается с первой (минус дни недели), как и столбцов (минус время). Это в стилях
#sched tr td:first-child {
background-color: #BDBDBD;
}
не нужно, просто осталось от начального. | |
| |
|
|
| |
|
|
| |
для: confirm
(22.05.2012 в 22:39)
| | | Строки добавил, но почему то не фильтруется проверял на этом сайте http://htmledit.squarefree.com эффект тот же самый что и у меня
Выбираем предмет, нажимаем фильтровать, ничего не меняется
<style type="text/css">
#sched {
color: #000;
font: 9pt Arial;
}
#sched th {
background: #BDBDBD;
}
#sched tr td:first-child {
background-color: #BDBDBD;
}</style>
<script>
var sl;
function in_array(k, a) {
for (key in a) {
if (a[key] == k) return true;
}
return false;
}
function selectSubjects(e, c) {
sl = [];
for(var i=0; i<e.length; i++)
if(e.options[i].selected) {
if(c && !e.value) sl.push(e.options[i].text);
else e.options[i].selected = false;
}
}
function setFilter(m)
if(!sl.length && !m) return false;
{
var bd = document.getElementById("sched").tBodies[1];
var c = bd.rows[0].cells.length;
for (var i = 0; i <bd.rows.length; i++) {
for (var k = 1; k<c; k++)
bd.rows[i].cells[k].style.color = m ? '#000' :
(in_array(bd.rows[i].cells[k].innerHTML, sl)
? '#000' : '#DDDDDD');
}
document.getElementById('subj').size=1;
selectSubjects(document.getElementById('subj'));
}
</script><table id="sched">
<tbody>
<tr>
<th>
</th>
<th>
Пон</th>
<th>
Втр</th>
<th>
Срд</th>
<th>
Чтв</th>
<th>
Птн</th>
<th>
Суб</th>
<th>
Вск???</th>
</tr>
</tbody>
<tbody>
<tr>
<th>
8.00</th>
<td>
Математика</td>
<td>
Физика</td>
<td>
Русский язык</td>
<td>
История</td>
<td>
Литература</td>
<td>
Физкультура</td>
<td>
Математика</td>
</tr>
<tr>
<th>
9.00</th>
<td>
Геоментрия</td>
<td>
Иностранный язык</td>
<td>
Физкультура</td>
<td>
Математика</td>
<td>
Физика</td>
<td>
Черчение</td>
<td>
Физкультура</td>
</tr>
<tr>
<th>
10.00</th>
<td>
Физкультура</td>
<td>
Математика</td>
<td>
Черчение</td>
<td>
Русский язык</td>
<td>
Иностранный язык</td>
<td>
Физика</td>
<td>
История</td>
</tr>
</tbody>
</table>
<p>
<select id="subj" multiple="multiple" onchange="selectSubjects(this, 1)" onfocus="this.size = 10" size="1"><option value="1">Выберите предмет/предметы...</option><option>Математика</option><option>Физика</option><option>Русский язык</option><option>История</option><option>Иностранный язык</option><option>Черчение</option><option>Физкультура</option><option>Геоментрия</option><option>Литература</option></select> <input onclick="setFilter()" type="button" value="Фильтровать" /> <input onclick="setFilter(1); selectSubjects(document.getElementById('subj'))" type="button" value="Сбросить" /></p>
|
| |
| |
|
|
| |
|
|
| |
для: andrew883
(22.05.2012 в 22:32)
| | | Что значит не выбирается? Проверено, работает, если вы что-то не изменили уже.
Если вы будете решать задачи свои по принципу "прыгает, ну его нафик", то вы на каждый щелчок и будете плодить лишние элементы. "Прыгание" устраняется разумным расположением списка относительно... и стилями. Кроме этого есть хорошие решения, которые подменяют раскрывающийся список обычным списком (UL-LI), позволяющим не только выбирать и выбранное отмечать чекбоксами, но еще и сортировать выбранные/не выбранные.
Так что "красивость" это уже второй вопрос, и решайте его сами.
PS. Я ошибку допустил, выставляя - проверьте у себя все ссылки на функцию selectSubjects(), есть написано с ошибкой, без e, исправьте.
И еще - в функцию setFilter() добавьте первой строкой if(!sl.length && !m) return false; | |
| |
|
|
| |
|
|
| |
для: confirm
(22.05.2012 в 21:08)
| | | Спасибо!
Странно, но почему то не выбирается предмет.
Еще нехорошо получается с multiple потому что когда пользователь туда нажимает все появляются поля куда щелкать, и результате чего содержимое страницы начинает прыгать | |
| |
|
|
| |
|
|
| |
для: andrew883
(22.05.2012 в 18:37)
| | | И зачем три списка? Вы не думали о том, что пользователь может выбрать Геометрия, Геометрия, Геометрия? И к чему такой выбор?
Вот пример, и выбор из одного списка:
<style>
#sched {
color: #000;
font: 9pt Arial;
}
#sched th {
background: #BDBDBD;
}
#sched tr td:first-child {
background-color: #BDBDBD;
}
</style>
<script>
var sl;
function in_array(k, a) {
for (key in a) {
if (a[key] == k) return true;
}
return false;
}
function selectSubjects(e, c) {
sl = [];
for(var i=0; i<e.length; i++)
if(e.options[i].selected) {
if(c && !e.value) sl.push(e.options[i].text);
else e.options[i].selected = false;
}
}
function setFilter(m) {
var bd = document.getElementById("sched").tBodies[1];
var c = bd.rows[0].cells.length;
for (var i = 0; i <bd.rows.length; i++) {
for (var k = 1; k<c; k++)
bd.rows[i].cells[k].style.color = m ? '#000' :
(in_array(bd.rows[i].cells[k].innerHTML, sl)
? '#000' : '#DDDDDD');
}
document.getElementById('subj').size=1;
slectSubjects(document.getElementById('subj'));
}
</script>
<table id="sched">
<tr>
<th> </th>
<th>Пон</th>
<th>Втр</th>
<th>Срд</th>
<th>Чтв</th>
<th>Птн</th>
<th>Суб</th>
<th>Вск???</th>
</tr>
<tbody>
<tr>
<th>8.00</th>
<td>Математика</td>
<td>Физика</td>
<td>Русский язык</td>
<td>История</td>
<td>Литература</td>
<td>Физкультура</td>
<td>Математика</td>
</tr>
<tr>
<th>9.00</th>
<td>Геоментрия</td>
<td>Иностранный язык</td>
<td>Физкультура</td>
<td>Математика</td>
<td>Физика</td>
<td>Черчение</td>
<td>Физкультура</td>
</tr>
<tr>
<th>10.00</th>
<td>Физкультура</td>
<td>Математика</td>
<td>Черчение</td>
<td>Русский язык</td>
<td>Иностранный язык</td>
<td>Физика</td>
<td>История</td>
</tr>
</tbody>
</table>
<select size="1" multiple id="subj" onfocus="this.size = 10"
onchange="selectSubjects(this, 1)">
<option value="1">Выберите предмет/предметы...</option>
<option>Математика</option>
<option>Физика</option>
<option>Русский язык</option>
<option>История</option>
<option>Иностранный язык</option>
<option>Черчение</option>
<option>Физкультура</option>
<option>Геоментрия</option>
<option>Литература</option>
</select>
<input type="button" value="Фильтровать"
onclick="setFilter()" />
<input type="button" value="Сбросить"
onclick="setFilter(1); selectSubjects(document.getElementById('subj'))" />
|
В каких учебных заведениях учатся в воскресенье? | |
| |
|
|
| |
|
|
| |
для: confirm
(22.05.2012 в 17:55)
| | | "Данные 1,2, 3" это одинаковые данные для всей таблицы.
Поясняю на примере пусть: "Данные 1"= "математика", "Данные 2" = "Физика", "Данные 3" ="Химия"
В Шапке даблице будут дни недели, в первом столбике будет время начала занятий, для нашего примера пусть будет время начинается с 10:00, далее 11:00 и т.д.
Когда пользователь открыл страничку, он захотел просмотреть когда у него занятие допустим по матиматике, он выбирает из списка математику и нажимает фильтровать, в таблице он должен увидеть только математику, НО пользователь захотел просмотреть еще и когда у него занятия и по математике и по физике, соответственно он выбирает в первом списке математику, во втором физику ну и так далее.
На самом деле таблица будет куда больше мне важно понять принцип как это работает. Пусть даже будет так что ячейки не удаляются а закрашиваются например белым цветом.
Вопрос как это осуществить?
И как связать поле со списком с кнопками "Фильтровать" и "Очистить" и таблицей. | |
| |
|
|
| |
|
|
| |
для: andrew883
(22.05.2012 в 17:10)
| | | Под проверкой я подразумеваю выбор уникальных значений, то есть выбрать из списка первого Данные 1 и эти же данные со второго списка нельзя. Вот тут как раз и поможет multiple. Если же такое допускается, то возникает масса вопросов, которые как раз и есть [i]"Что значит как данные связаны?". Изначально заполненная таблица не вызывает проблем, в смысле удаления из нее значений, а вот следующий выбор, это значит удалить то что есть, и добавить то, чего нет. Вот тут и встают вопросы:
а) в какую ячейку помещать Данные 1 из первого списка, а Данные 1 с другого списка, и тоже самое по остальным данным?
б) как связаны (какой закономерностью) данные из списков с ячейками таблицы, или это случайные местоположения?
Если восстанавливать данные, то их где-то надо хранить, а это может быть либо массив, либо атрибуты ячеек таковые хранить будут. И в том и другом случае должна быть какая-то закономерность, связь элементов массива с данными списка и ячейками таблицы.
Я этого у вас не вижу, а пояснять вы не поясняете. Поэтому, исходя чисто из примера, все для меня рисуется галиматней, не более, причем страдающей излишеством. )
А посему, видимо, вам придется решать все самому, вы ведь представляете чего хотите.
Таблица обладает коллекцией строк и столбцов, пройдясь по которым в цикле вы можете получить доступ к каждой ячейке таблицы. Если у вас одна таблица на странице, то обратиться к ней можно по имени тега, иначе укажите id этой таблице и обращайтесь к ней по нему. Изменить содержимое ячейки можно посредством innerHTML. Пример обхода таблицы с удалением значений в ее ячейках:
var tb = document.getElementById("id_вашей_таблицы");
var c = tb.rows[0].length;
for (var i = 0; i <tb.rows.length; i++) {
for (var k = 0; k <c; k++) tb.rows[i].cells[k].innerHTML = '';
}
|
таким же образом можно и получить значение ячейки, а сравнив с выбором, решить - удалять значение или нет. При записи в ячейку данных, соответственно указывать данные, но вот какие и куда я не знаю. Вполне возможно, что это фиксированное местоположения их, и тогда не надо ничего удалять, а изменять цвет в ячейке, делая таким образом данные невидимыми, или приглушить цвет.
В общем каким образом, это просто, а остальное сами. | |
| |
|
| |
|
