JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<table cellspacing="0" cellpadding="0" border="0">
    <thead class="">
        <tr>
            <th>Source Column</th>
            <th>Screen Name</th>
            <th>Salesforce Columns</th>
            <th>Map Columns</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>PO_CRDCHK_THRSH</td>
            <td>
                <input type="text" size="10" id="acctSearch">
            </td>
            <td>
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
        <tr>
            <td>NACE_DESC_TEXT </td>
            <td>
               <input type="text" size="10" id="acctSearch">
            </td>
            <td>
                
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
        <tr>
            <td>BLOCK_DELIVERY</td>
            <td>
               <input type="text" size="10" id="acctSearch">
            </td>
            <td>
                
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
    </tbody>
</table>
            
<div id="divPopUp">
				  <div><input class="chk" id="mychk1" type="checkbox" value="Account : Account Phone (PHONE, 40 )" />Account : Account Phone (PHONE, 40 )</div>
				  <div><input class="chk" id="mychk2" type="checkbox" value="Account : Data.com Key (STRING, 20 )" />Account : Data.com Key (STRING, 20 )</div>
				  <div><input class="chk" id="mychk3" type="checkbox" value="Account : Shipping Latitude (DOUBLE, 0 )" />Account : Shipping Latitude (DOUBLE, 0 )</div>
				  <div><input class="chk" id="mychk4" type="checkbox" value="Account : Parent Account ID (REFERENCE, 18 )" />Account : Parent Account ID (REFERENCE, 18 )</div>
				  <div><input class="chk" id="mychk5" type="checkbox" value="Account : Billing Address (ADDRESS, 0 )" />Account : Billing...

JavaScript

$(function() {
    $("#divPopUp").dialog({
        resizable: true,
        autoOpen: false,
        width: 550,
        modal: true,
        buttons: {
            "Save": function() {
                var text = $(this).find( ":checkbox:checked" ).map(function() {
                    return this.value+' ';
                }).get().join();
                
                var obj = $(this).data("opener");
                $(obj).parents('td:first').siblings(':eq(2)').text(text);
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close:function(){
            $(this).find( ":checkbox" ).removeAttr('checked');
            $( this ).dialog( "close" );
        }
    });
    
    $('button.btn').on('click', function(){
        var title = $(this).parents('td:first').siblings(':eq(0)').text();
        $( "#divPopUp" ).data('opener', this).dialog( "option", "title", title ).dialog( "open" );
        var text = $(this).parents('td:first').siblings(':eq(2)').text();
        if($.trim(text) != ''){
            var texts = text.split(" ,"); 
            $.each(texts, function(i, value){ $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
            });
        }
    });
});