click on display and change it to the textbox
<p>I just started to develop web. I am currently stuck in a question not sure how to solve it.</p>

<p>I have 2 pages, one for me to enter the product name and the price of it. After I click the save button, it will save to the database, after successfully save the data, it load back the page for me to continue enter the data. When I click the report button I will go to the report page (Here is where the question starts.) I can see the table with colums and rows nicely displayed with the data: product name and price. What I would like to do here is to edit the data as I like. I click on the product it will change to the textbox and still keeps the data inside textbox, (meaningly, it won't be readonly anymore). The same to the price. What I previously did was: each row I have the check box, click on the checkbox, I will use the jquery something like this to change. </p>

<pre><code>$("input[name^='chk']").click(function() {
        $("input[name^='chk']").each(function() {
        if($(this).is(':checked')) {
            var i = $(this).val();
            $("#cost"+i).attr('readonly', false);
            $("#qty"+i).attr('readonly', false);
        }else{
            var i = $(this).val();
            $("#cost"+i).attr('readonly', true);
            $("#qty"+i).attr('readonly', true);
        }
        }); 
    });
</code></pre>

<p>But what I do not want now is do not display the data inside the textbox even in the beginning. Click on it, then it only will change to textbox. And I also do not wish to have the checkbox also. It makes my page look ugly. I've seen this way in several websites, but I don't know how to do it. If anyone can help me out to this, I really appreciate your help</p>
