JSFiddle - React, Tailwind, and code Playground

by bthorn

HTML

<table>
    <tr>
        <td class="person"><a href='#'>Miller Bob T</a>

        </td>
    </tr>
</table>
<!-- dynamic table generation is the problem -->Fill the DIV with dynamically created TABLE
<input type="button" id="fillTable" value="Fill DIV with Dynamic Table">
<div id="divEmpResult" style="margin-left: 15px"></div>

CSS

td.person {
    color: red;
}
.person:hover {
    color:red !important;
    background-color:yellow;
}
.nameField:hover {
    color:red !important;
    background-color:yellow;
}

JavaScript

$('.person').on('click', function () {
    var x = $(".person").text();
    console.log(x);
});


 $(document).on('click', '.nameField', function () {
            //console.log('t');
            //var x = $(".nameField").text();
             var x = $(this).text();
     
     		
            //var x = $(this).parent(".nameField").text();
            console.log(x);
			
     		
        });





$('#fillTable').click(function () {
    
var data =[{'Email':'t.Miller@companyemail.com','LastFirst':'abcsaker,b','FIRST_NAME':'b','INITIALS':'W     ','LAST_NAME':'abcsaker','ALIAS_NAME':'BWabcSAK','OFFICE':'sdfdf   ','TITLE':'rrr EQUIPMENT 3','DEPARTMENT':'Construction East','EMPLOYEE_NUMBER':'444     '},{'Email':'abcter.plethcer@companyemail.com','LastFirst':'stillman,abcter','FIRST_NAME':'abcter','INITIALS':'A     ','LAST_NAME':'Streeper','ALIAS_NAME':'HASTREEP','OFFICE':'adfafd   ','TITLE':'TRADES HELPER 2ND YEAR','DEPARTMENT':'ee Locating - West','EMPLOYEE_NUMBER':'6666     '},{'Email':'brad.abckele@companyemail.com','LastFirst':'abckele,brad','FIRST_NAME':'brad','INITIALS':'J     ','LAST_NAME':'abckele','ALIAS_NAME':'CJabcKEL','OFFICE':'adffg   ','TITLE':'DESIGNER d SR - (asfe)','DEPARTMENT':'afe Design A','EMPLOYEE_NUMBER':'999     '}]; 
    
     writeRegister(data);
    
});



function writeRegister(allData) {
    //console.log(allData);
    //$('#matchText').text(allData.length + ' matches.');
    var strResult = "<table id='headerTable' class='table'><thead id='headers'><th>Name</th><th>Office</th><th>Title</th><th>Department</th><th>Alias</th>";

    $.each(allData, function (index, issues) {

        strResult += "<tr><td class='nameField'> <a href='#'>" + issues.LAST_NAME + " " + issues.FIRST_NAME + " " + issues.INITIALS + "</a></td><td>" + issues.OFFICE + "</td><td>" + issues.TITLE + "</td>";
        strResult += "<td>" + issues.DEPARTMENT + "</td><td class='alias'>" + issues.ALIAS_NAME + "</td>";
        strResult += "</tr>";
    });
    strResult +=...