|
Сообщение от 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>