.

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);
});