Ich habe eine Tabelle mit diesem Markup:

<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>

Jede Tabellenzeile ist ein Produkt und einige Produkte enthalten weitere Informationen. In diesem Fall sieht eine Tabelle also so aus:

<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>

Ich möchte die Zeilen mit den Produktinformationen nicht ausblenden und nach einem Klick auf die Produktzeile anzeigen.

Ich habe dies mit der folgenden Javascript-Funktion und onclick = "" versucht:

function showHide(id) {
    var el = document.getElementById(id);
    if( el && el.style.visibility == 'hidden')    
        el.style.visibility = 'visible'; 
    else 
        el.style.visibility = 'hidden'; 
}

Das Problem ist jedoch, dass ich nicht weiß, wie ich nur die Informationszeilen des Produkts ansprechen soll, auf das ich geklickt habe. Es wäre einfach, wenn ich das Markup ändern könnte, aber dieses Markup wird generiert, sodass ich es nur mit Javascript lösen kann.

Ist es möglich, dieses Problem zu lösen? Ich habe eine Geige erstellt, damit es einfacher ist, eine schnelle Lösung zu liefern:

http://jsfiddle.net/emjay__/8B3M4/

0
emjay 4 Dez. 2013 im 18:12

3 Antworten

Beste Antwort

Eine reine JS-Methode:

http://jsfiddle.net/8B3M4/13/

    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';
        }
    }
2
forsvunnet 5 Dez. 2013 im 14:40

Zuerst verwenden Sie die Klasse und wählen ID aus.

Auf der zweiten Seite würde ich die Anzeigeeigenschaft verwenden.

if( el && el.style.visibility == 'hidden')    
    el.style.display = 'block'; 
else 
    el.style.display = 'none'; 

Auf der dritten unsichtbaren Seite haben Sie noch "viel" Arbeit zu erledigen, um es zum Laufen zu bringen.

2
Chexpir 4 Dez. 2013 im 14:20

Dies funktioniert (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();  }); 
1
Qullbrune 4 Dez. 2013 im 15:16