JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<table>
    <colgroup>
        <col class="col4" />
        <col class="col2" />
        <col class="col1" />
        <col class="col3" />
        <col class="col4" />
    </colgroup>
    <tr class="headerRow">
        <th>&nbsp;</th>
        <th>ItemName</th>
        <th>Role</th>
        <th>Quantity</th>
        <th>Delete</th>
    </tr>
    <tr id="1" class="itemRow">
        <td class="edit">
            <img src="" alt="e" />
        </td>
        <td class="name">00. Email Configuration</td>
        <td class="role">admin</td>
        <td class="quantity"></td>
        <td class="delete">
            <input id="del1" class="css-checkbox" type="checkbox" checked="checked" />
            <label for="del1" name="lbl_del1" class="css-label"></label>
        </td>
    </tr>
    <tr id="2" class="itemRow altItem">
        <td class="edit">
            <img src="" alt="e" />
        </td>
        <td>01. Account Configuration</td>
        <td class="role">dba</td>
        <td class="quantity"></td>
        <td class="delete">
            <input id="del2" class="css-checkbox" type="checkbox" checked="checked" />
            <label for="del2" name="lbl_del2" class="css-label"></label>
        </td>
    </tr>
</table>

CSS

table {
    border:1px solid black;
}
element.style {
    font-family:verdana;
    font-size:8pt;
}
.headerRow {
    background-color:#666666;
    color:white;
}
th {
    background-color:#666666;
    border-width:0;
    border-collapse:collapse;
}
td {
    border-color:#CCCCCC;
    border-width:1px;
}
th, td {
    border-style:solid;
    font-size:10pt;
    font-weight:normal;
    text-align:left;
    padding:2px 5px;
}
.col1 {
    width:60px;
}
.col2 {
    width:360px;
}
.col3 {
    width:40px;
}
.col4 {
    width:30px;
}
.altItem {
    background-color:Lavender;
}
.edit {
    cursor:pointer;
}
.edit img {
    height:20px;
    width:20px;
}
.css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
    padding-left:20px;
    height:15px;
    display:inline-block;
    line-height:15px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:15px;
    vertical-align:middle;
    cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}
.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/lite-orange-check.png);
}

JavaScript

$(document).ready(function () {
    var imgEditUrl = 'https://cdn1.iconfinder.com/data/icons/meBaze-Freebies/512/edit-notes.png';
    $('.edit img').attr('src', imgEditUrl);

    $('.edit').click(function () {
        //alert('test');
        var message = 'test edit';
        var _dialog = $('<div id="dynaDialog" class="dynaDialog"><p>' + message + '.</p></div>');
        _dialog.dialog({
            autoOpen: false,
            modal: true,
            width: 300,
            height: 200,
            resizable: false,
            modal: true,
            title: "Edit Form",
            buttons: {
                "Save": function () {
                    $(this).dialog("close");
                },
                    "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
        alert('ok');
        _dialog.dialog("open");
    });

    $('.edit')

});