Wie werden die Zeilen in einer Tabelle mit Zeilen in einer anderen Tabelle mithilfe von Jquery zusammengeführt?

Question

Ich habe zwei Tabellen wie folgt aus:

  Table # 1        Table # 2 

| Minima | A | B | C | D |   | Group | Minima | A | B | C | D | 
---------------------------   ---------------------------------- 
| 1 | 0 | 0 | 0 | 1 |   |  | 
---------------------------   --------- 
| 15 | 1 | 1 | 1 | 1 |   |  | 
---------------------------   --------- 
| 3 | 0 | 0 | 1 | 1 |   |  | 
---------------------------   --------- 
| 6 | 0 | 1 | 1 | 0 |   |  | 
---------------------------   --------- 

ich alle Zeilen der Tabelle # 1 mit der Tabelle # 2, auch ich brauche fusionieren müssen Gruppen mit der Anzahl der „1“ in die zugehörige zu machen Zeile der Tabelle # 1. Bsp .: Die Minima 3 und 6 haben 2 Nummern "1", diese sollten in der 2 Gruppe sein.

Die Tabelle # 2 sollte wie folgt aussehen:

  Table #2 

| Group | Minima | A | B | C | D | 
---------------------------------- 
| 1 | 1 | 0 | 0 | 0 | 1 | 
---------------------------------- 
|  | 3 | 0 | 0 | 1 | 1 | 
| 2 |------------------------- 
|  | 6 | 0 | 1 | 1 | 0 | 
---------------------------------- 
| 4 | 15 | 1 | 1 | 1 | 1 | 
---------------------------------- 

Answer 1

überprüfen Sie bitte den folgenden Code-Schnipsel

Was Sie von der ersten Tabelle, die ein Objekt tun können, erstellen, in dem Sie Gruppenelement basierend auf die Anzahl der 1en und dann dieses Objekt verwenden und Zeilen in der zweiten Tabelle erstellen.

$(document).ready(function() { 
 
    var $table1 = $("#table1"); 
 
    var rows = $table1.find("tbody tr"); 
 
    var totalrows = rows.length; 
 

 
    var object = {}; 
 

 

 
    rows.each(function(row) { 
 
    var newTr = jQuery("<tr/>") 
 
    var cols = $(this).find("td"); 
 
    var colslength = cols.length; 
 
    var count = 0; 
 
    var i; 
 
    for (i = 1; i < colslength; i = i + 1) { 
 
     var $tdObject = $(cols[i]); 
 
     var tdText = parseInt($tdObject[0].innerText, 10); 
 
     if (tdText == 1) { 
 
     count++; 
 
     } 
 
    } 
 
    if (count > 0) { 
 

 

 
     if (!object[count]) { 
 
     object[count] = []; 
 
     } 
 
     object[count].push({ 
 
     "Minimum": $(this).find("td:eq(0)")[0].innerText, 
 
     "A": $(this).find("td:eq(1)")[0].innerText, 
 
     "B": $(this).find("td:eq(2)")[0].innerText, 
 
     "C": $(this).find("td:eq(3)")[0].innerText, 
 
     "D": $(this).find("td:eq(4)")[0].innerText 
 
     }); 
 

 
    } 
 

 

 
    }); 
 
    AppendRows(object); 
 

 

 
}); 
 

 
function AppendRows(object) { 
 

 
    Object.keys(object).forEach(function(item) { 
 

 
    createRows(object[item], item); 
 
    }); 
 
} 
 

 
function createRows(arr, group) { 
 
    var $table2 = $("#group2"); 
 
    var len = arr.length; 
 
    var idx = 0; 
 

 
    while (idx < len) { 
 
    var row = jQuery("<tr/>"); 
 
    if (idx == 0) { 
 
     var td = $("<td></td>"); 
 
     td.html(group); 
 
     row.append(td); 
 
     if (len > 1) { 
 
     td.attr('rowspan', len) 
 
     } 
 
    } 
 
    Object.keys(arr[idx]).forEach(function(obj) { 
 
     var td = $("<td></td>"); 
 
     td.html(arr[idx][obj]); 
 
     row.append(td); 
 

 
    }); 
 
    $table2.append(row); 
 

 
    idx++; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table1" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>Minimum</th> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     1 
 
     </td> 
 

 
     <td> 
 
     0 
 
     </td> 
 

 
     <td> 
 
     0 
 
     </td> 
 

 
     <td> 
 
     0 
 
     </td> 
 

 
     <td> 
 
     1 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>15</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 

 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>0</td> 
 
     <td>0</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>6</td> 
 
     <td>0</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>0</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table id="group2" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>Group</th> 
 
     <th>Minima</th> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
    </tr> 
 
    </thead> 
 
</table>

hoffe, das hilft