DOM manipulation for table rows

This is the html

    <thead><tr><th> Metric/Driver</th></tr></thead>
        <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>

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

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:

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

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

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]