click on display and change it to the textbox

I just started to develop web. I am currently stuck in a question not sure how to solve it.

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 tex开发者_如何学运维tbox 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.

$("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);
        }
        }); 
    });

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

You can hide and show elements by using jQuery. Just put both the textbox and the displayed data on the page, and then hide the textboxes using jQuery's .hide(). When the user clicks on the displayed data, you can hide the data and show the textbox with .show() in the click function you define in the element's .click().

Another alternative is to dynamically insert the textboxes after user clicks on the displayed data, using for example .html() in jQuery.

You'll need to study the jQuery documentation a while to get something like this done, but it's quite easy once you get the hang of it.