JSFiddle - React, Tailwind, and code Playground

by Sujit Jadhav

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<table class="tableContent">
<thead>
    <tr class="header">
        <th class="col0">StaffNumber</th>
        <th class="col1">RoleName</th>
        <th class="col2">ReadOnly</th>
        <th class="col3">Modify</th>        
        <th class="col4">Approve</th>
    </tr>
</thead>
<tbody> 
    <tr class="1">
        <td>1</td>  
        <td>RoleA</td>
        <td><input type="checkbox" class="readOnly"></td>
        <td><input type="checkbox" class="modify" checked></td>
        <td><input type="checkbox" class="approve"></td>        
    </tr>
    <tr class="1">
        <td>1</td>  
        <td>RoleB</td>
        <td><input type="checkbox" class="readOnly"></td>
        <td><input type="checkbox" class="modify" checked></td>
        <td><input type="checkbox" class="approve"></td>        
    </tr>
    <tr class="2">
        <td>2</td>  
        <td>RoleA</td>
        <td><input type="checkbox" class="readOnly" checked></td>
        <td><input type="checkbox" class="modify" checked></td>
        <td><input type="checkbox" class="approve"></td>        
    </tr>
    <tr class="2">
        <td>2</td>  
        <td>RoleB</td>
        <td><input type="checkbox" class="readOnly" checked></td>
        <td><input type="checkbox" class="modify" checked></td>
        <td><input type="checkbox" class="approve" checked></td>        
    </tr>
</tbody>
</table>

<textarea id="textarea1" rows="4" cols="50"> 
</textarea>

JavaScript

var myRows = [];
var roles = [];
var roleIndex =0;
var $headers = $("th");
var lastStaff = '';
var currStaff = '';
var staffIndex = -1;
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("td");    
  $cells.each(function(cellIndex) {  	  	  	
  	if(cellIndex==0){
    	currStaff = $(this).html();         
      if (lastStaff == currStaff && lastStaff !=''){      	
      	roleIndex = roleIndex + 1;         
      }else{      	
      	roleIndex = 0;
        staffIndex = staffIndex + 1;
        myRows[staffIndex] = {};
      }
      myRows[staffIndex][$($headers[cellIndex]).html()] = $(this).html();    
      roles[roleIndex] = {};
    }else if (cellIndex==1){
    	roles[roleIndex][$($headers[cellIndex]).html()] = $(this).html();    
    }else{    
    	roles[roleIndex][$($headers[cellIndex]).html()] = $(this).find('input[type=checkbox]').is(':checked');
    }
  });  
  lastStaff=currStaff;  
  myRows[staffIndex]['roles'] = roles;
});
var myObj = {};
myObj.myrows = myRows;
alert(JSON.stringify(myObj));
$("#textarea1").html(JSON.stringify(myObj));