Problem adding the datepicker to a dynamically created text box

Problem adding the datepicker to a dynamically created text box

I have an HTML table into which I dynamically create table rows, and each table row contains a single column holding a dynamically created INPUT box to which I attached the Datepicker control. My problem is that when I do so it is incredibly slow and when the table contains more than approximately 100 rows, the script stops working.

I am clearly adding the control incorrectly; can someone look at the following HTML code and please tell me what I am doing wrong?

HTML start
================================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link type="text/css" href="css/sunny/jquery-ui-1.8.4.custom.css" rel="stylesheet" />   
<script type="text/javascript" src="assets/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="assets/jquery-ui-1.8.4.custom.min.js"></script>


<script type="text/javascript">
    $(document).ready(function(){
        //get reference to the table body element
         var tbody = document.getElementById('tbod');
        
        //create 50 rows             
        for (var i = 0; i < 50; i++){
            //create table row element
            var tr = document.createElement('tr');
            tbody.appendChild(tr);

            //create INPUT element
            var tdDate = document.createElement('td');
            var tdInput = document.createElement('input');
            tdInput.type = 'text';
            tdInput.setAttribute("maxlength", "8");
           
            //create unique ID for the input element           
            var dpid = "dpicker" + i;
            tdInput.setAttribute("id", dpid);

            //append control to the td element
            tdDate.appendChild(tdInput);
            tdDate.className = 'Date';

            //append the element to  the tr element
            tr.appendChild(tdDate);
           
            //add the datepicker functionality
            $('#' + dpid).datepicker();
            $('#' + dpid).datepicker('option', {dateFormat: 'dd/mm/yy'});
            $('#' + dpid).datepicker('option', {buttonText: 'Velg dato'});
            $('#' + dpid).datepicker('option', {buttonImage: 'graphics/calendar.png'});

        }
                      
    });
</script>

</head>

<body>

    <table class="tab" width="100" border="1">
           <thead>
            <tr>
                <th>Date</th>
              </tr>
        </thead>

        <tbody id="tbod">
        </tbody>
    </table>

</body>
</html>
===========================================================================
HTML end