JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table id="scrapApprovalTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Company</th>
            <th>Notes</th>
            <th>Comments</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
                <tr class="#specialPricingScrapID#" id="#specialPricingScrapID#">
                    <td class="details-control" value="1"></td>
                    <td class="date">mm-dd-yyyy</td>
                    <td class="company"><a href="http://www.pblead.com/cfleadsource/MarMgt.cfm?ContactID=12#ContactInfo" target="_blank">company</a>
                    </td>
                    <td class="notes">notes</td>
                    <td class="comments">
                        <textarea name="processingScrapComments-12" id="processingScrapComments-<cfoutput>#specialPricingScrapID#</cfoutput>" cols="30" rows="5"></textarea>
                    </td>
                    <td class="buttons">
                        <input type="hidden" id="requestID" value="#specialPricingScrapID#">
                        <button class="btn btn-success btn-block btn-small" id="btn-ApproveScrapRequest" name="btn-ApproveScrap" onclick="processRequest(#specialPricingScrapID#, #contactid#, #userid#)">Approve</button>
                        <br>
                        <button class="btn btn-danger btn-block" id="btn-RejectScrapRequest" name="btn-RejectScrap" onclick="processDenial(#specialPricingScrapID#, #contactid#, #userid#)">Deny</button>
                        <br>
                    </td>
                </tr>
    </tbody>
</table>

JavaScript

console.log($('#scrapApprovalTable tbody'))


    var approvalTable = $('#scrapApprovalTable').DataTable();
    $('#scrapApprovalTable tbody').on('click', 'td.details-control', function (e) {
        e.stopPropagation();
        var $this = $(this);
        var trid = $this.closest('tr').attr('id');
        alert("TR ID " + trid);
        var tdid = $this.find('td#' + trid).attr('id');
        alert("TD ID " + tdid);
    });