Jquery How do I change +, - on expandable section

Jquery How do I change +, - on expandable section

HTML

<table>
        <col style="width: 40px;">
        <col style="width: 80px;">
        <col style="width: 150px;">
        <col style="width: 40px;">
        <thead>
            <tr>
                <th>
                    ID
                </th>
                <th colspan="2">
                    Name
                </th>
                <th>
                    Total
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="parent" id="row123">
                <td>
                    123
                </td>
                <td colspan="2">
                    Bill Gates
                </td>
                <td>
                    100
                </td>
            </tr>
            <tr class="child-row123">
                <td>
                    &nbsp;
                </td>
                <td>
                    2007-01-02
                </td>
                <td>
                    A short description
                </td>
                <td>
                    15
                </td>
            </tr>
            <tr class="child-row123">
                <td>
                    &nbsp;
                </td>
                <td>
                    2007-02-03
                </td>
                <td>
                    Another description
                </td>
                <td>
                    45
                </td>
            </tr>
            <tr class="child-row123">
                <td>
                    &nbsp;
                </td>
                <td>
                    2007-03-04
                </td>
                <td>
                    More Stuff
                </td>
                <td>
                    40
                </td>
            </tr>
            <tr class="parent" id="row456">
                <td>
                    456
                </td>
                <td colspan="2">
                    Bill Brasky
                </td>
                <td>
          ...

JavaScript

$(document).ready(function () {
            $('tr:first').append('<th></th>');

            $('tr.parent').append('<td>+</td>');

            $('tr.parent').css("cursor", "pointer").attr("title", "Click to expand/collapse").click(function () {
                $(this).siblings('.child-' + this.id).is(':visible') ? $(this).find('td:last').text('+') : $(this).find('td:last').text('-');
                $(this).siblings('.child-' + this.id).toggle();
            });

            $('tr[@class^=child-]').hide();
        });