首先是效果圖

下面是html前臺的佈局程式碼

再是jq的程式碼

 <script>
//頁面載入時將input框和儲存和取消隱藏
$(document).ready(function(){
$("input[name='xs1']").hide();
$("input[name='xs2']").hide();
$("span[class='edit']").hide();
        });
//點選編輯顯示input框，隱藏編輯，顯示儲存和取消
$(function(){
$("a[rel='edit']").click(function () {
$(this).
 
parent().parent().parent().find("input[name='xs1']").show();
$(this).parent().parent().parent().find("input[name='xs2']").show();
$(this).parent().parent().parent().find("span[class='xst1']").hide();
$(this).parent().parent().parent().find("span[class='xst2']").hide();
$(this).hide();
$(this).parent
 
().parent().find("span[class='edit']").show();
            })
        });
//點選儲存後獲取input框的值，用ajax傳送到後臺進行資料庫更改操作
$(function () {
$("a[rel='update']").click(function () {
var xs1 = $(this).parent().parent().parent().find("input[name='xs1']").val();
var xs2 = $(this).parent().parent().parent().find("input[name='xs2']"
 
).val();
var id = $(this).parent().parent().parent().find("input[name='id']").val();
//                var $this = $(this);
$.ajax({
type: "post",
url: "{:U('Mediasetdwjxswh/update')}",
data: { id: id, xs1: xs1,xs2:xs2},
                }).done(function (data) {
if (data == "1") {
alert("儲存成功！");
window.location.reload();
                    }
else
alert("儲存失敗！");
                });
            })
        });
//點選取消將input框隱藏和儲存和取消隱藏，將編輯顯示出來
$(function () {
$("a[rel='cancel']").click(function () {
$(this).parent().parent().parent().find("input[name='xs1']").hide();
$(this).parent().parent().parent().find("input[name='xs2']").hide();
$(this).parent().parent().parent().find("span[class='xst1']").show();
$(this).parent().parent().parent().find("span[class='xst2']").show();
$(this).parent().parent().find("span[class='edit']").hide();
$(this).parent().parent().find("a[rel='edit']").show();
            })
        });
</script>

每個方法是起什麼作用都已經新增上了註釋哦！