HTML+CSS+JavaScript

Доброго времени суток, никак не получается сделать таблицу так чтобы при выборе нескольких полей со списками (selection field) и нажатии кнопки (button) в таблице выводились только те значения (других быть не должно, нужно чтобы убирались именно сами ячейки в таблице, но при этом таблица не должна смещаться) которые заданы в полях со списком (selection field)

Смещение, это сдвиг влево, вправо, вверх, вниз. Удаление ячейки, это изменение таблицы, и в зависимости от того какие ячейки удаляются и как удаляются, ваша таблица останется целой или будет нарушена.
Задавая такой вопрос, необходимо показывать код вашей таблицы, описав на конкретном чего вы ходите.

Смысл в том, что бы мы не выбирали в полях "Selection1", "Selection2" или "Selection3" в таблице должно оставаться только те данные которые мы выбрали в полях "Selection..." причем мы их можем использовать как вместе так и раздельно, в смысле выбрать только значения "Selection1" и "Selection2"

<p>     &nbsp;</p> <title></title> <style type="text/css"> <!--{cke_protected}{C}%3C!%2D%2D%0A%20%20tr%20%7B%20background-color%3A%20%23DDDDDD%7D%0A%20%20.initial%20%7B%20background-color%3A%20%23DDDDDD%3B%20color%3A%23000000%20%7D%0A%20%20.normal%20%7B%20background-color%3A%20%23CCCCCC%20%7D%0A%20%20.highlight%20%7B%20background-color%3A%20%238888FF%20%7D%0A%2F%2F%2D%2D%3E--></style> <br /> <p>     <select name="Selection1"><option selected="selected" value="">Данные 1</option><option selected="selected" value="">Данные 2</option><option selected="selected" value="">Данные 3</option> </select> &nbsp;&nbsp;&nbsp;&nbsp;  <select name="Selection 2"><option selected="selected" value="">Данные 1</option><option selected="selected" value="">Данные 2</option><option selected="selected" value="">Данные 3</option></select>  &nbsp;&nbsp;&nbsp;&nbsp;  <select name="Selection3"><option selected="selected" value="">Данные 1</option><option selected="selected" value="">Данные 2</option><option selected="selected" value="">Данные 3</option></select> &nbsp;&nbsp;&nbsp;&nbsp;<input name="Filter" type="button" value="Фильтровать" />&nbsp;&nbsp;&nbsp; <input name="Reset" type="button" value="Сброс" /></p> <p>    &nbsp;</p> <table bgcolor="#CCCCCC" border="0" cellpadding="0" cellspacing="0">     <tbody>         <tr>             <td bgcolor="#FFCC00" width="100">                 <span style="font-weight: bold;">Дата1</span></td>             <td bgcolor="#FFCC00" width="100">                 <span style="font-weight: bold;">Дата2</span></td>             <td bgcolor="#FFCC00" width="100">                 <span style="font-weight: bold;">Дата3</span></td>             <td bgcolor="#FFCC00" width="100">                 <span style="font-weight: bold;">Дата4</span></td>             <td bgcolor="#FFCC00" width="100">                 <span style="font-weight: bold;">Дата5</span></td>             <td bgcolor="#FFCC00" width="100">                 <span style="font-weight: bold;">Дата6</span></td>             <td bgcolor="#FFCC00" width="100">                 <span style="font-weight: bold;">Дата7</span></td>         </tr>         <tr onmouseout="this.className='normal'" onmouseover="this.className='highlight'">             <td>                 Данные 1</td>             <td>                 Данные 2</td>             <td>                 Данные 3</td>             <td>                 Данные 1</td>             <td>                 Данные 2</td>             <td>                 Данные 3</td>             <td>                 Данные 1</td>         </tr>         <tr onmouseout="this.className='normal'" onmouseover="this.className='highlight'">             <td>                 Данные 2</td>             <td>                 Данные 1</td>             <td>                 Данные 2</td>             <td>                 Данные 2</td>             <td>                 Данные 1</td>             <td>                 Данные 2</td>             <td>                 Данные 2</td>         </tr>         <tr class="initial" onmouseout="this.className='normal'" onmouseover="this.className='highlight'">             <td>                 Данные 3</td>             <td>                 Данные 2</td>             <td>                 Данные 3</td>             <td>                 Данные 3</td>             <td>                 Данные 1</td>             <td>                 Данные 3</td>             <td>                 Данные 1</td>         </tr>     </tbody> </table> <p>    &nbsp;</p>

Вы думаете из представленного вами можно догадаться, что Данные 1 из первого списка, это тоже самое, что и Данные 1 из второго списка, или это разные данные? Как они связаны, и что кому из них принадлежит в таблице? Это трудно пояснить?
Вы хотите получить ответ? Значит пишите конкретно, и выставляйте главное, то что касается сути, без лишнего.
И еще. К примеру, выбрано 1 и 3 из первого списка (остальные игнорируем, так-как что сие означает не понятно), следовательно удаляем ячейки ими не занятые, в результате получим такую таблицу:

<table border="1"> <tr> <td>Дата1</td> <td>Дата2</td> <td>Дата3</td> <td>Дата4</td> <td>Дата5</td> <td>Дата6</td> <td>Дата7</td> </tr> <tr> <td>Данные 1</td> <td>Данные 3</td> <td>Данные 1</td> <td>Данные 3</td> <td>Данные 1</td> </tr> <tr> <td>Данные 1</td> <td>Данные 1</td> </tr> <tr> <td>Данные 3</td> <td>Данные 3</td> <td>Данные 3</td> <td>Данные 1</td> <td>Данные 3</td> <td>Данные 1</td> </tr> </table>

Структура таблицы нарушена, а для того, чтобы она осталась целостной, необходимо при удалении либо объединять ячейки, либо удалять всю колонку. А у вас ведь еще и заголовки есть, с ними как поступать?
Выход - это удалять данные из ячеек, а не сами ячейки, или искать иное решение, с таблицами не связанное.
Определяйтесь.

"Данные 1, 2, 3" во всей таблице это одинаковое значение, просто по разному перетасовано.
Кароче в результате должно получится что то вроде расписание, выбираем например в списке "данные1" в таблице должны увидеть шапку и только "данные 1", захотели увидеть в таблице "данные1" и "данные2" выбрали в первом списке "данные1" во втором "данные2" в таблице должно остаться только шапка ,"данные 1" и "данные 2". Далее по аналогии с "данные 3" .
Мне важен результат, а как он будет организован не очень важно.
Если нельзя удалить ячейку из таблицы чтобы таблица не прыгала, то пусть удаляются данные. Вопрос в том как это осуществить?

Для возможности выбора из списка набора данных служит атрибут multiple. Так что вполне можно обойтись одним, да и три списка предполагают проверку выбора.
Удалить данные в ячейках несложно, но ведь удалив их, нельзя уже будет отобразить иной выбор, или это для одноразового выбора?
Если нет, то значит эти данные должны храниться для последующего представления. Но как они связаны с самими ячейками, вы не ответили.

да, мне как раз то ки и нужна проверка выбора, multiple не подходит
в таблице должен быть предусмотрен и одноразовый и сразу несколько выборов
Что значит как данные связаны? В таблице будет расписание, поэтому сдвиг таблицы недопустим

Под проверкой я подразумеваю выбор уникальных значений, то есть выбрать из списка первого Данные 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 = ''; }

таким же образом можно и получить значение ячейки, а сравнив с выбором, решить - удалять значение или нет. При записи в ячейку данных, соответственно указывать данные, но вот какие и куда я не знаю. Вполне возможно, что это фиксированное местоположения их, и тогда не надо ничего удалять, а изменять цвет в ячейке, делая таким образом данные невидимыми, или приглушить цвет.

В общем каким образом, это просто, а остальное сами.

"Данные 1,2, 3" это одинаковые данные для всей таблицы.
Поясняю на примере пусть: "Данные 1"= "математика", "Данные 2" = "Физика", "Данные 3" ="Химия"
В Шапке даблице будут дни недели, в первом столбике будет время начала занятий, для нашего примера пусть будет время начинается с 10:00, далее 11:00 и т.д.
Когда пользователь открыл страничку, он захотел просмотреть когда у него занятие допустим по матиматике, он выбирает из списка математику и нажимает фильтровать, в таблице он должен увидеть только математику, НО пользователь захотел просмотреть еще и когда у него занятия и по математике и по физике, соответственно он выбирает в первом списке математику, во втором физику ну и так далее.
На самом деле таблица будет куда больше мне важно понять принцип как это работает. Пусть даже будет так что ячейки не удаляются а закрашиваются например белым цветом.
Вопрос как это осуществить?
И как связать поле со списком с кнопками "Фильтровать" и "Очистить" и таблицей.

И зачем три списка? Вы не думали о том, что пользователь может выбрать Геометрия, Геометрия, Геометрия? И к чему такой выбор?
Вот пример, и выбор из одного списка:

<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>&nbsp;</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'))" />

В каких учебных заведениях учатся в воскресенье?

Спасибо!
Странно, но почему то не выбирается предмет.
Еще нехорошо получается с multiple потому что когда пользователь туда нажимает все появляются поля куда щелкать, и результате чего содержимое страницы начинает прыгать

Что значит не выбирается? Проверено, работает, если вы что-то не изменили уже.
Если вы будете решать задачи свои по принципу "прыгает, ну его нафик", то вы на каждый щелчок и будете плодить лишние элементы. "Прыгание" устраняется разумным расположением списка относительно... и стилями. Кроме этого есть хорошие решения, которые подменяют раскрывающийся список обычным списком (UL-LI), позволяющим не только выбирать и выбранное отмечать чекбоксами, но еще и сортировать выбранные/не выбранные.
Так что "красивость" это уже второй вопрос, и решайте его сами.

PS. Я ошибку допустил, выставляя - проверьте у себя все ссылки на функцию selectSubjects(), есть написано с ошибкой, без e, исправьте.

И еще - в функцию setFilter() добавьте первой строкой if(!sl.length && !m) return false;

Строки добавил, но почему то не фильтруется проверял на этом сайте 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>                 &nbsp;</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>

Добавить первой строкой не означает написать ее вне тела функции. Перепишите:

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;
}
не нужно, просто осталось от начального.

Переписал эффект тот же
Не нужно ли в таблице как то связать значения в таблице со значениями в списке?

В Лисе? Это потому, что у вас в таблице текст содержит переходы на новую строку, а в текстах опций нет, следовательно при сравнении такие значения определяются неравными. Кроме этого, Лиса по умолчанию подставит в качестве значения опций их текст, если не указать иного (упустил я из виду это). Перепишите так:

<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>                  &nbsp;</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>

Огромное спасибо!!!