jquery 动态添加表格行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在此处插入标题</title>
<style>
tr {
    background-color: white;
    font-size: 12px;
    height: 30px;
}

td {
    text-align: center
}
</style>
<script language='javascript' src='../jQuery/jquery.js'></script>
<script>
    $().ready(function() {
        $('#btnOk').bind('click', function() {
            
            //取出三个文本框的值
            var name = $('#name').val();
            var price = $("#price").val();
            var address = $("#address").val();

            //从表头中复制一行插入到表格的内容的最后
            $('#result').append($('#result tr:first').clone());
            
            //选中表格中最后一行中的某个td，改变它的内容
            $('#result tr:last td:eq(0)').html(name);
            $('#result tr:last td:eq(1)').html(price);
            $('#result tr:last td:eq(2)').html(address);    

        });
    });
</script>
</head>
<body>
    <table id='result' width=800 cellspacing="1" bgcolor='#6699cc'>
        <tr>
            <td>商品</td>
            <td>价格</td>
            <td>产地</td>
        </tr>

    </table>
    <hr>
    <input type='text' id='name' />
    <hr>
    <input type='text' id='price' />
    <hr>
    <input type='text' id='address' />
    <hr>
    <input type='button' id='btnOk' value='确定' />
</body>
</html>