JQuery - Table TR TD stuff

by Luis Valle

HTML

<table id="tblSample">
    <tr>
        <th>
            Col1
        </th>
        <th>
            Col3
        </th>
        <th>
            Col3
        </th>
    </tr>
    <tr class="selectedRowX">
        <td>
            one
        </td>
        <td>
            two
        </td>
        <td>
            three
        </td>
    </tr>
    <tr>
        <td>
            one
        </td>
        <td>
            two
        </td>
        <td>
            three
        </td>
    </tr>
    <tr>
        <td>
            one
        </td>
        <td>
            two
        </td>
        <td>
            three
        </td>
    </tr>
</table>

<div>
    <input id="btnChange" type="submit" value="Change Cell" />
</div>

CSS

table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
    padding: 8px;
}
.selectedRowX {
    color: red;
}

JavaScript

$(document).ready(function () {
    $('#btnChange').on('click', function () {
        $('.selectedRowX')[0].cells[2].innerHTML = 'changed!';
    });
    
    $('td').on('select', function () {
        alert('something selected');
    });
    
    $('#tblSample tr').mouseup(function () {
        if ($.trim(window.getSelection()) == '') {
            alert('clicked');
        }
    });
    
    $('#tblSample td').mouseup(function (e) {
        if ($.trim(window.getSelection()) != '') {
            //alert(window.getSelection());
            //alert($(this).index());
            //alert($(this).closest('table').attr('id'));
            alert($(this).getSelection());
        }
    });
});