Jquery 单击display并将其更改为文本框

我刚开始开发网络。我现在陷入了一个问题，不知道如何解决它

我有两页，一页供我输入产品名称和价格。单击保存按钮后，它将保存到数据库中，成功保存数据后，它将加载回页面供我继续输入数据。当我点击报告按钮时，我将进入报告页面（这里是问题开始的地方）。我可以看到表格中的列和行很好地显示了数据：产品名称和价格。我想在这里做的是编辑我喜欢的数据。我点击产品，它将变为文本框，并且仍然将数据保存在文本框中（这意味着，它不再是只读的）。价格也一样。我之前所做的是：每行我都有一个复选框，单击复选框，我将使用jquery这样的东西来更改

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

---

但我现在不希望的是，即使在开始时也不要在文本框中显示数据。点击它，它只会变成文本框。我也不希望有复选框也。这让我的页面看起来很难看。我在一些网站上看到过这种方式，但我不知道怎么做。如果有人能帮我解决这个问题，我真的非常感谢你的帮助

你可以使用jQuery隐藏和显示元素。只需将文本框和显示的数据放在页面上，然后使用jQuery的.hide（）隐藏文本框。当用户单击显示的数据时，可以隐藏数据并在元素的.click（）中定义的单击函数中显示文本框，其中包含.show（）

另一种方法是在用户单击显示的数据后动态插入文本框，例如使用jQuery中的.html（）

您需要学习jQuery文档一段时间才能完成类似的工作，但一旦掌握了窍门，就很容易了