jQuery loop through td and insert jQueryUI progress bar

Question

I am trying to use the jQuery's progressbar method on the value in my table. I've been able to traverse the table and add the proper div's for the required progressbar's selector. The progress bar does not display the val variable correctly.

var i = 0;
var val = 0;
var id = "";
$("document").ready(function() {
    $('#progress tr').find('td').each(function() {
        //$(this).append("<div></div>");
        if ($(this).html() >= 0)
        {
            //alert($(this).html());
            val = $(this).html();
            id = "p_"+i;
            $(this).html('<div id="'+id+'"></div>');
            $('#'+id).progressbar({
                         "value": val
            });
            i++;
            //$('#'+id).attr('aria-valuenow',val);
            alert(val);
        }
    });
 });
 $(function() {
 $("#progressbar").progressbar( "option", "value", 37 );
 });


<table cellspacing="0" cellpadding="0" border="0" id="progress">
<caption>Class Performance</caption>
<tbody>
<tr>
    <th>Student Name</th>
    <th>Grade 1</th>
    <th>Grade 2</th>
    <th>Grade 3</th>
    <th>Grade 4</th>
    <th>Grade 5</th>
    <th>Grade 6</th>
</tr>
    <tr>
    <td>Wayne, Bruce</td>
    <td>100</td>
    <td>100</td>
    <td>67</td>
    <td>14</td>
    <td>6</td>
    <td>0</td>
</tr>
    <tr>
    <td>Dent, Harvey</td>
    <td>100</td>
    <td>100</td>
    <td>33</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
</tr>
</tbody>
</table>

Answer 1

FROM: val = $(this).html();

TO: val = parseInt($(this).html());

Any ideas on how to optimize this code?

Answer 2

val = $(this).html();

will retrieve all the 'html'.. i.e along with the tags of the elements within the TD....

If you want to get the integer value alone, try saving it in a hidden field inside the td and accessing it when you want to get the value....