.

DOM manipulation for table rows

This is the html

<table>
    <thead><tr><th> Metric/Driver</th></tr></thead>
    <tbody>
        <tr data-met="0" > <td > metric 1</td></tr>
        <tr data-met="1" > <td > metric 2</td></tr>
        <tr data-met="2" > <td > metric 3</td></tr>
    </tbody>
</table>

This is the Jquery code:

$('tr[data-met]').click(function () {
    var idString = $(this).attr("data-met");

    //inserts after this element
    $(this).after("<tr><td>note for metric " + idString + " </td></tr>");

    //inserts into same tr element
    //$("<tr><td>test</td></tr>").appendTo(this);
});

Quick direct references to Jquery & JqueryU

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

jQuery & jQuery.UI available test

The following code block:

<script>
    if (typeof jQuery != 'undefined') {
        // jQuery is loaded => print the version
        alert(jQuery.fn.jquery);
    } else {
        alert('jQuery is NOT loaded');
    }

    $(document).ready(function() {
        if (jQuery.ui) {
        } else {
            alert('jQuery.UI is NOT loaded!!');
        }
    });
</script>

will either print the JQuery version or inform you if no JQuery library is found.
also warn if jQueryUI is not loaded

JQuery Effects

[No text]