我有一个带有此标记的表:
<table>
<tr class="odd"><td>Product 1</td></tr>
<tr class="even"><td>Product 2</td></tr>
<tr class="odd"><td>Product 3</td></tr>
<tr class="even"><td>Product 4</td></tr>
</table>
每个表格行都是产品,有些产品有更多信息。所以在这种情况下,表格如下所示:
<table>
<tr class="odd"><td>Product 1</td></tr>
<tr class="even"><td>Product 2</td></tr>
<tr class="even"><td>Information 1</td></tr>
<tr class="even"><td>Information 2</td></tr>
<tr class="odd"><td>Product 3</td></tr>
<tr class="even"><td>Product 4</td></tr>
</table>
我不想用产品信息隐藏行,并在点击产品行后显示它。
我尝试使用以下Javascript函数和onlick =“”:
function showHide(id) {
var el = document.getElementById(id);
if( el && el.style.visibility == 'hidden')
el.style.visibility = 'visible';
else
el.style.visibility = 'hidden';
}
但问题是我不知道如何只定位我点击过的产品的信息行。如果我可以更改标记会很容易,但会生成此标记,所以我只能用Javascript解决它。
有可能解决这个问题吗?我创造了一个小提琴,所以提供快速解决方案更容易:
答案 0 :(得分:4)
大家好,我建议你使用Jquery解决方案: http://jsfiddle.net/8B3M4/9/
首先用CSS隐藏所有元素:匹配所有以相同类名开头的元素。
tr.even + .even {
display:none;
}
tr.odd + .odd {
display:none;
}
第二个显示/隐藏元素的函数:
$(document).ready(function () {
$('tr.even').click(function (){
$(this).nextUntil('.odd').toggle();
})
})
答案 1 :(得分:2)
首先,您正在使用课程并选择ID。
另一方面,我会使用显示属性。
if( el && el.style.visibility == 'hidden')
el.style.display = 'block';
else
el.style.display = 'none';
在第三只看不见的手上,你仍然需要做很多工作才能让它运转起来。
答案 2 :(得分:2)
纯JS方法:
var current_class = 'odd';
var current_index = 0;
var pairs = [];
// Loop through each td
var table = document.getElementsByTagName('table')[0];
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
// Pair the products with their information based on the class
if (row.getAttribute('class') !== current_class) {
current_index++;
current_class = row.getAttribute('class');
}
// Set up the pairing
if (pairs[current_index] === undefined) {
// A new pair in sights
pairs[current_index] = {
'product': row.cells[0],
'info': []
}
row.cells[0].onclick = function(ci) {
return function() {
for (var j = 0; j < pairs[ci].info.length; j++) {
var cell = pairs[ci].info[j];
if (cell.style.display == 'none') {
cell.style.display = '';
}
else {
cell.style.display = 'none';
}
}
}
}(current_index);
}
else {
// Add more info to the object
pairs[current_index].info.push(row.cells[0]);
console.log(row.cells[0].style.display);
row.cells[0].style.display = 'none';
}
}
答案 3 :(得分:1)
这是有效的(s。http://jsfiddle.net/S7gTA/3/)
var lastClass = 0;
var lastIndex = 0;
$('tr').each(function(index, element){ // get each tr on the page, change the selector to #%TABLEID% > tr if this should work only for a specific table
if($(this).attr("class") != lastClass) // class change from odd to even or even to odd?
{
lastClass = $(this).attr("class"); // set current "mother" class
lastIndex = index; // store the index of the "mother"
$(this).addClass("mother").attr("rel", index) // now the mother is able to hide or show all the element with the class info-for-%index% *1
}
else
{
$(this).addClass("info-for-"+lastIndex).hide();
}
});
$( '.mother' ).bind("click", function(){ $('.info-for-'+$(this).attr("rel")).toggle(); });