如何使用Jquery將表中的行與另一個表中的行合併？

Question

我有兩個表是這樣的：

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

我需要將表＃1的所有行與表＃2合併，我也需要與「1」的個數相關的組進表1中的行。例如：最小值3和6有2個數字「1」，這些應該在2組中。

表＃2應該是這樣的：

  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

請檢查下面的代碼片段

你可以做的是，創建了第一個表，在那裏你組項目基於對象1的數目，然後使用此對象並在第二個表中創建行。

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

希望這有助於