cer825m cer825m - 1 month ago 8
HTML Question

How to merge the rows in a table with rows in another table using Jquery?

I have two tables like this:

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


I need to merge all the rows of the table # 1 with the table # 2, also I need to make groups related with the number of "1" into the row of the table # 1. Ex: The Minima 3 and 6 have 2 number "1", These should be in the 2 group.

The table #2 should look like this:

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

Please check the following code snippet

What you can do is, create an object from the first table,where you group items based on the number of 1's and then use this object and create rows in the second table.

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

Hope this helps

Comments