Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.03.2014, 09:21
Новичок на форуме
Отправить личное сообщение для Xuor Посмотреть профиль Найти все сообщения от Xuor
 
Регистрация: 13.03.2014
Сообщений: 4

Вопрос по show/hide/toggle
Есть таблица
<table>
 <tr>
   <td height="40" width="120" class="thead">Наименование</td>
   <td height="40" width="120" class="thead">Файл</td>
   <td class="thead">Дата обновления</td>
   <td class="thead">Min шт. одной позиции / Заказ от, шт.</td>
 </tr>
<!---Строка 1--->
 <tr>
   <td height="40" width="120" class="pname">Прочее</td>
   <td height="40" width="120" class="pfile"><a href="price.rar">price.rar</a></td>
   <td class="pupdate"></td>
   <td class="pabout">
     <div height="30px">от 1 000р.</div>
     <div height="10px" align="right">
       <a onclick="var elm = document.getElementById('spoiler').style;elm.display == 'table-cell' ? elm.display ='none' : elm.display ='table-cell';">Подробнее >>></a>
     </div>
   </td>
 </tr>
<!---/Строка 1--->
<!----Спойлер--->
 <tr>
   <td colspan="4" id="spoiler">
     <h1>&nbsp</h1>
   </td>
 </tr>
<!----/Спойлер--->
</table>


Вопрос: строк в таблице будет много, обязательно ли к каждой строке(каждому спойлеру) присваить уникальный id? Можно ли как то не привязывать спойлер к конкретному id?

Последний раз редактировалось Xuor, 13.03.2014 в 09:36.
Ответить с цитированием
  #2 (permalink)  
Старый 13.03.2014, 10:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Xuor
обязательно ли к каждой строке(каждому спойлеру) присваить уникальный id?
да
Сообщение от Xuor
Можно ли как то не привязывать спойлер к конкретному id?
да заменить id на class
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .pabout a{
        cursor: pointer;
    }
    .spoiler{
        display: none;
    }
   </style>
 <script>
       /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
;if("document" in self&&!("classList" in document.createElement("_"))){(function(j){"use strict";if(!("Element" in j)){return}var a="classList",f="prototype",m=j.Element[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1},n=function(o,p){this.name=o;this.code=DOMException[o];this.message=p},g=function(p,o){if(o===""){throw new n("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(o)){throw new n("INVALID_CHARACTER_ERR","String contains an invalid character")}return c.call(p,o)},d=function(s){var r=k.call(s.getAttribute("class")||""),q=r?r.split(/\s+/):[],p=0,o=q.length;for(;p<o;p++){this.push(q[p])}this._updateClassName=function(){s.setAttribute("class",this.toString())}},e=d[f]=[],i=function(){return new d(this)};n[f]=Error[f];e.item=function(o){return this[o]||null};e.contains=function(o){o+="";return g(this,o)!==-1};e.add=function(){var s=arguments,r=0,p=s.length,q,o=false;do{q=s[r]+"";if(g(this,q)===-1){this.push(q);o=true}}while(++r<p);if(o){this._updateClassName()}};e.remove=function(){var t=arguments,s=0,p=t.length,r,o=false;do{r=t[s]+"";var q=g(this,r);if(q!==-1){this.splice(q,1);o=true}}while(++s<p);if(o){this._updateClassName()}};e.toggle=function(p,q){p+="";var o=this.contains(p),r=o?q!==true&&"remove":q!==false&&"add";if(r){this[r](p)}return !o};e.toString=function(){return this.join(" ")};if(b.defineProperty){var l={get:i,enumerable:true,configurable:true};try{b.defineProperty(m,a,l)}catch(h){if(h.number===-2146823252){l.enumerable=false;b.defineProperty(m,a,l)}}}else{if(b[f].__defineGetter__){m.__defineGetter__(a,i)}}}(self))};
   </script>
</head>

<body>
<table>
 <tr>
   <td height="40" width="120" class="thead">Наименование</td>
   <td height="40" width="120" class="thead">Файл</td>
   <td class="thead">Дата обновления</td>
   <td class="thead">Min шт. одной позиции / Заказ от, шт.</td>
 </tr>
<!---Строка 1--->
 <tr>
   <td height="40" width="120" class="pname">Прочее</td>
   <td height="40" width="120" class="pfile"><a href="price.rar">price.rar</a></td>
   <td class="pupdate"></td>
   <td class="pabout">
     <div height="30px">от 1 000р.</div>
     <div height="10px" align="right">
       <a onclick="var elm = document.getElementById('spoiler').style;elm.display != 'table-cell' ?   elm.display ='table-cell':elm.display ='none';">Подробнее >>></a>
     </div>
   </td>
 </tr>
<!---/Строка 1--->
<!----Спойлер--->
 <tr>
   <td colspan="4" class="spoiler">
     <h1>11111</h1>
   </td>
 </tr>
<!----/Спойлер--->
<!---Строка 1--->
 <tr>
   <td height="40" width="120" class="pname">Прочее</td>
   <td height="40" width="120" class="pfile"><a href="price.rar">price.rar</a></td>
   <td class="pupdate"></td>
   <td class="pabout">
     <div height="30px">от 1 000р.</div>
     <div height="10px" align="right">
       <a onclick="var elm = document.getElementById('spoiler').style;elm.display != 'table-cell' ?   elm.display ='table-cell':elm.display ='none';">Подробнее >>></a>
     </div>
   </td>
 </tr>
<!---/Строка 1--->
<!----Спойлер--->
 <tr>
   <td colspan="4" class="spoiler">
     <h1>22222</h1>
   </td>
 </tr>
<!----/Спойлер--->

</table>
<script>
    (function () {
    var items = document.querySelectorAll('tr');
    for (var i = 0; i < items.length; i++) {
        var a = items[i].querySelector('.pabout a'),
            td = items[i + 1].querySelector('.spoiler');
        if (a && td) a.onclick = (function (td) {
            return function () {
                td.classList.toggle('spoiler');
            }

        })(td);
    }
})();
</script>
</body>

</html>

Последний раз редактировалось рони, 13.03.2014 в 11:59.
Ответить с цитированием
  #3 (permalink)  
Старый 13.03.2014, 11:00
Новичок на форуме
Отправить личное сообщение для Xuor Посмотреть профиль Найти все сообщения от Xuor
 
Регистрация: 13.03.2014
Сообщений: 4

Спасибо! плюсую)
Ответить с цитированием
  #4 (permalink)  
Старый 13.03.2014, 11:27
Новичок на форуме
Отправить личное сообщение для Xuor Посмотреть профиль Найти все сообщения от Xuor
 
Регистрация: 13.03.2014
Сообщений: 4

Проверил. В ie не работает
Ответить с цитированием
  #5 (permalink)  
Старый 13.03.2014, 12:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Xuor,
вставьте для ie строки 16 -19
Ответить с цитированием
  #6 (permalink)  
Старый 13.03.2014, 12:10
Новичок на форуме
Отправить личное сообщение для Xuor Посмотреть профиль Найти все сообщения от Xuor
 
Регистрация: 13.03.2014
Сообщений: 4

Все работает! Спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 13.03.2014, 12:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Xuor
Все работает!
тогда можно проще, при условии что class спойлера будет 1.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .pabout a{
        cursor: pointer;
    }
    .spoiler{
        display: none;
    }
   </style>
</head>

<body>
<table>
 <tr>
   <td height="40" width="120" class="thead">Наименование</td>
   <td height="40" width="120" class="thead">Файл</td>
   <td class="thead">Дата обновления</td>
   <td class="thead">Min шт. одной позиции / Заказ от, шт.</td>
 </tr>
<!---Строка 1--->
 <tr>
   <td height="40" width="120" class="pname">Прочее</td>
   <td height="40" width="120" class="pfile"><a href="price.rar">price.rar</a></td>
   <td class="pupdate"></td>
   <td class="pabout">
     <div height="30px">от 1 000р.</div>
     <div height="10px" align="right">
       <a onclick="var elm = document.getElementById('spoiler').style;elm.display != 'table-cell' ?   elm.display ='table-cell':elm.display ='none';">Подробнее >>></a>
     </div>
   </td>
 </tr>
<!---/Строка 1--->
<!----Спойлер--->
 <tr>
   <td colspan="4" class="spoiler">
     <h1>11111</h1>
   </td>
 </tr>
<!----/Спойлер--->
<!---Строка 1--->
 <tr>
   <td height="40" width="120" class="pname">Прочее</td>
   <td height="40" width="120" class="pfile"><a href="price.rar">price.rar</a></td>
   <td class="pupdate"></td>
   <td class="pabout">
     <div height="30px">от 1 000р.</div>
     <div height="10px" align="right">
       <a onclick="var elm = document.getElementById('spoiler').style;elm.display != 'table-cell' ?   elm.display ='table-cell':elm.display ='none';">Подробнее >>></a>
     </div>
   </td>
 </tr>
<!---/Строка 1--->
<!----Спойлер--->
 <tr>
   <td colspan="4" class="spoiler">
     <h1>22222</h1>
   </td>
 </tr>
<!----/Спойлер--->

</table>
<script>
    (function () {
    var items = document.querySelectorAll('tr');
    for (var i = 0; i < items.length; i++) {
        var a = items[i].querySelector('.pabout a'),
            td = items[i + 1].querySelector('.spoiler');
        if (a && td) a.onclick = (function (td) {
            return function () {
                var cls = td.className
                td.className = cls == 'spoiler' ? '' : 'spoiler';
            }

        })(td);
    }
})();
</script>
</body>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56
Вопрос по each() и перебору строк таблицы battrack jQuery 1 09.02.2012 14:30
вопрос про возможности JS для рисования и анимации macdack Библиотеки/Тулкиты/Фреймворки 3 15.07.2011 00:13
Вопрос на миллион. Ajax и идентификация по адресной строке. 0931454574 AJAX и COMET 5 31.03.2011 11:54
Теоретический вопрос. gods33 (X)HTML/CSS 10 16.12.2010 23:49