Wie man einfaches Akkordeon mit nur bestimmten Tabellenzeilen erstellt?

Question

Ich habe eine HTML-Tabelle, die verschiedene Elemente auflistet. Jeder <tr> hat ein eindeutiges title Element, aber einige Elemente sind verwandt und diese Zeilen haben den gleichen Titel. Ich versuche, jQuery-Code zu schreiben, der diese Tabelle analysiert und nur die Elemente mit dem gleichen Titel in ein einfaches Akkordeon konvertiert, dann eine neue anklickbare Zeile direkt über ihnen einfügt, die diesen freigegebenen Titel als Inhalt verwendet, und diese verwandten Elemente umschaltet Elemente bei Klick.

Dies ist eine Beispiel-Tabelle, vor der Umwandlung in den „Orange“ Artikel beziehen:

<table> 
    <tr title="Banana"> 
     <td>Document 1</td> 
    </tr> 
    <tr title="Apple"> 
     <td>Document 2</td> 
    </tr> 
    <tr title="Orange"> 
     <td>Document 3</td> 
    </tr> 
    <tr title="Orange"> 
     <td>Document 4</td> 
    </tr> 
    <tr title="Orange"> 
     <td>Document 5</td> 
    </tr> 
    <tr title="Lemon"> 
     <td>Document 6</td> 
    </tr> 
    <tr title="Cherry"> 
     <td>Document 7</td> 
    </tr> 
</table> 

Das ist, was ich versuche diese Tabelle zu konvertieren. Im Grunde bin ich versteckt zugehörige Artikel und ich bin mit einem neu über ihnen erstellt Reihe zum Anzeigen/Verbergen:

<table> 
    <tr title="Banana"> 
     <td>Document 1</td> 
    </tr> 
    <tr title="Apple"> 
     <td>Document 2</td> 
    </tr> 
    <tr title="Orange"> 
     <td>Orange (click to toggle)</td> 
    </tr> 
    <tr title="Orange" style="display:none;"> 
     <td>Document 3</td> 
    </tr> 
    <tr title="Orange" style="display:none;"> 
     <td>Document 4</td> 
    </tr> 
    <tr title="Orange" style="display:none;"> 
     <td>Document 5</td> 
    </tr> 
    <tr title="Lemon"> 
     <td>Document 6</td> 
    </tr> 
    <tr title="Cherry"> 
     <td>Document 7</td> 
    </tr> 
</table> 

Anmerkung 1: Der Titel kann alles sein. Ich benutze hier nur "Orange" als Beispiel, aber in Wirklichkeit kann der Titel sogar mehrere Wörter sein.

Hinweis 2: Verwandte Artikel werden nacheinander gestapelt.

Was wäre der einfachste Weg, dies zu erreichen?

Answer 1

Sie von hier

$(document).ready(function(){ 
 
\t var titles_arr = [] , create_list = []; 
 
    $('tr[title]').each(function(){ 
 
    \t var title = $(this).attr('title').trim(); 
 
    if($.inArray(title , titles_arr) > -1){ 
 
     if($.inArray(title , create_list) <= -1){ 
 
     \t create_list.push(title); 
 
     } 
 
    }else{ 
 
    \t titles_arr.push(title); 
 
    } 
 
    }); 
 
    //console.log(create_list[0]); 
 
    for(var i = 0 ; i < create_list.length ; i++){ 
 
    \t var newtrTitle = create_list[i]; 
 
    var html = '<tr title="'+newtrTitle+'" class="clcToggle"><td>'+newtrTitle+' (Click To Toggle)</td></tr>'; 
 
    $(html).insertBefore('tr[title="'+newtrTitle+'"]:eq(0)').promise().done(function(){ 
 
    \t $('tr[title="'+newtrTitle+'"]').not(':eq(0)').hide(); 
 
    }); 
 
    
 
    } 
 
    
 
\t 
 
    
 
    $('#MainTable').on('click', '.clcToggle',function(){ 
 
    \t var title = $(this).attr('title').trim(); 
 
    \t $('tr[title="'+title+'"]').not(':eq(0)').slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="MainTable"> 
 
    <tr title="Banana"> 
 
     <td>Document 1</td> 
 
    </tr> 
 
    <tr title="Apple"> 
 
     <td>Document 2</td> 
 
    </tr> 
 
    <tr title="Orange"> 
 
     <td>Document 3</td> 
 
    </tr> 
 
    <tr title="Orange"> 
 
     <td>Document 4</td> 
 
    </tr> 
 
    <tr title="Orange"> 
 
     <td>Document 5</td> 
 
    </tr> 
 
    <tr title="Lemon"> 
 
     <td>Document 6</td> 
 
    </tr> 
 
    <tr title="Lemon"> 
 
     <td>Document 6</td> 
 
    </tr> 
 
    <tr title="Cherry"> 
 
     <td>Document 7</td> 
 
    </tr> 
 
    <tr title="Cherry"> 
 
     <td>Document 8</td> 
 
    </tr> 
 
</table>

Hinweis starten: diesen Code wird gut funktionieren, wenn Sie den gleichen tr Titel hinter einander haben .. müssen ein wenig Arbeit, sie zu arrangieren, wenn seine zufällig

Answer 2

Wenn kann ich davon ausgehen, dass alle Artikel des gleichen Typs zusammengefasst:

// Step 1: Code to add an extra row if there are multiple occurrences of an item 
// This is not dynamic yet 
if($("tr[title='Orange']").length>1){ // if there is more than one occurance 
    $("tr[title='Orange']").first().before('<tr title="Orange"><td>Orange (click to toggle)</td></tr>') 
} 

    // Step 2: Loop through the items to make the above code dynamic 
var ftypes = []; 
$("table tr").each(function(idx)){ 
// get one of each type of fruit 
if(ftypes.indexOf($(this).attr('title'))<0) ftypes.push($(this).attr('title')); 
}); 

ftypes.forEach(function(fruit){ 
// if each fruit have more than one occurrence then add a row above 
    if($("tr[title='"+fruit+"']").length>1){ 
     $("tr[title='"+fruit+"']").first().before('<tr title="'+fruit+'"><td>Orange (click to toggle)</td></tr>') 
    } 
}); 

Answer 3

angeordnet Hoffnung, das tut, was Sie es tun müssen, fügte ich eine zusätzliche Zeile überprüfen zu verdoppeln, dass es richtig funktioniert.

Ich hoffe, die Kommentare helfen genug, lassen Sie mich wissen, wenn etwas unklar ist.

function click_handler(e) { 
 
    var $this = $(this); 
 
    //I am too lazy to write $(this) over and over again 
 
    $('tr[title="' + $this.prop('title') + '"]').not($this).toggle(); 
 
    //First Part: gets all TR elements with same title 
 
    //Next Part: but not this element 
 
    //Toggle their visibility; 
 
} 
 
$(document).ready(function() { 
 
    var prev; //Previous Element. 
 
    var prev_i = 0; //previous level. 
 
    $('tr').each(function(i, el) { 
 
    el = $(el); 
 
    if (prev != null) { 
 
     //So we are not at the first element. 
 
     if (prev.prop('title') == el.prop('title')) { 
 
     //The previous title and the current el title are the same. 
 
     if (prev_i == 0) { 
 
      prev.text(prev.text() + "(click to toggle)"); 
 
      //If we are at previous level 0, meaning we have not encountered this portion of the loop before, we need to add the "click to toggle" text. 
 
      prev.on('click', click_handler.bind(prev)); 
 
      //Add the click_handler, bound to the previous element (first). 
 
     } 
 

 
     el.hide(); //Hide any not-first element with the same title 
 

 
     ++prev_i; 
 
     } else { 
 
     prev_i = 0; 
 
     //If the titles are different, we reset the previous level. 
 
     } 
 

 
    } //end prev!=null 
 
    prev = el; 
 
    //set previous element 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr title="Banana"> 
 
    <td>Document 1</td> 
 
    </tr> 
 
    <tr title="Apple"> 
 
    <td>Document 2</td> 
 
    </tr> 
 
    <tr title="Orange"> 
 
    <td>Orange</td> 
 
    </tr> 
 
    <tr title="Orange"> 
 
    <td>Document 3</td> 
 
    </tr> 
 
    <tr title="Orange"> 
 
    <td>Document 4</td> 
 
    </tr> 
 
    <tr title="Orange"> 
 
    <td>Document 5</td> 
 
    </tr> 
 
    <tr title="Lemon"> 
 
    <td>Document 6</td> 
 
    </tr> 
 
    <tr title="Lemon"> 
 
    <td>Document 7</td> 
 
    </tr> 
 
    <tr title="Cherry"> 
 
    <td>Document 8</td> 
 
    </tr> 
 
</table>