jQuery表格的行編輯

單擊單元格，單元格顯示為一個控件
然后，在控件中輸入或者選擇值，失去焦點之后
獲取該控件的值，顯示在單元格中
控件可以是input、select、datetime等
Input

Select2

Datetime

// 表格單元格點擊事件 $("#assayItemData_tbody").on("click", "td", function () {var td = $(this);var url = $("form").attr("action");var text = td.text();var a = td.find('a');var innerDatetime = a.text();var param = td.find("a").attr("data-pk");var str = JSON.stringify(param);if (str != undefined) {var index = str.indexOf(",");var header = str.substring(1, index);// 檢驗化驗結果if (header == "assayItemData") {var assayItemID = td.find("a").attr("data-assayItemID");var comboDatas = comboDatasMap.get(assayItemID);if (comboDatas) {// 下拉框var txt = $("<select name='cell' type='text' class='form-control' style='margin: 0px;" +"border-style: none;padding: 0px;height: 100%;width: 100%'></select>");var options = '<option ></option>';$.each(comboDatas, function (j, comboData) {for (var key in comboData) {options += '<option value="' + comboData[key] + '">' + comboData[key] + '</option>';}});txt.append(options);// 失去焦點，保存值,與服務器交互txt.change(function () {var newText = $(this).select2('data').text;var newVal = $(this).val();var value = param + "," + newVal;$.ajax({type: 'POST',url: ctx + "/biz/assay-item-data/update",data: {value: value},dataType: 'JSON',success: function (res) {var message = res.message;// 移除文本框,顯示新值td.find('div').remove();a.text(newText);td.append(a);},error: function () {}});});// 清空原有值td.text("");// 綁定元素td.append(txt);// 獲取焦點txt.focus();// select2txt.select2({width: 100 + "%", placeholder: "請選擇", allowClear: true});} else {//inputvar txt = $("<input name='cell' type='text' class='form-control' style='margin: 0px;" +"border-style: none;padding: 0px;height: 100%;width: 100%'>").val(text);// 失去焦點，保存值,與服務器交互txt.blur(function () {var newText = $(this).val();var value = param + "," + newText;$.ajax({type: 'POST',url: ctx + "/biz/assay-item-data/update",data: {value: value},dataType: 'JSON',success: function (res) {if (!res.success) {$.app.alert({title: "警告",message: res.message});}if (res.judgmentResult) {// 單項判定的結果寫入表格var tr = $(td).closest("tr");tr.find("td[columnname='judgmentResult']").find('a').text(res.judgmentResult);}// 移除文本框,顯示新值td.find('input').remove();a.text(newText);td.append(a);},error: function () {}});});// 清空原有值td.text("");// 綁定元素td.append(txt);// 獲取焦點td.find('input').focus();}}// 設備編號、單項判定else if (header == "assayEquipmentNo" || header == "judgmentResult") {// inputvar txt = $("<input name='cell' type='text' class='form-control' style='margin: 0px;" +"border-style: none;padding: 0px;height: 100%;width: 100%'>").val(text);// 失去焦點，保存值,與服務器交互txt.blur(function () {var newText = $(this).val();var value = param + "," + newText;$.ajax({type: 'POST',url: ctx + "/biz/assay-item-data/update",data: {value: value},dataType: 'JSON',success: function (res) {if (!res.success) {$.app.alert({title: "警告",message: res.message});}if (res.judgmentResult) {//單項判定的結果寫入表格var tr = $(td).closest("tr");tr.find("td[columnname='judgmentResult']").find('a').text(res.judgmentResult);}// 移除文本框,顯示新值td.find('input').remove();a.text(newText);td.append(a);},error: function () {}});});// 清空原有值td.text("");// 綁定元素td.append(txt);// 獲取焦點td.find('input').focus();}// 檢測方法else if (header == "assayMethodId") {// selectvar txt = $("<select name='cell' type='text' class='form-control' style='margin: 0px;" +"border-style: none;padding: 0px;height: 100%;width: 100%'></select>");var assayItemID = td.find("a").attr("data-assayItemID");var assayMethads = assayMethadArry.get(assayItemID);var options = '<option ></option>';$.each(assayMethads, function (j, assayMethad) {options += '<option value="' + assayMethad.id + '">' + assayMethad.assayMethodName + '</option>';});txt.append(options);// 失去焦點，保存值,與服務器交互txt.change(function () {var newText = $(this).select2('data').text;var newVal = $(this).val();var value = param + "," + newVal;$.ajax({type: 'POST',url: ctx + "/biz/assay-item-data/update",data: {value: value},dataType: 'JSON',success: function (res) {clickCodeTableTr.click();/* var message = res.message;// 移除文本框,顯示新值td.find('div').remove();a.text(newText);td.append(a);*/},error: function () {}});});// 清空原有值td.text("");// 綁定元素td.append(txt);// 獲取焦點txt.focus();// select2txt.select2({width: 100 + "%", placeholder: "請選擇", allowClear: true});}// 數據核對人else if (header == "assayDataCollator") {// selectvar txt = $("<select name='cell' type='text' class='form-control' style='margin: 0px;" +"border-style: none;padding: 0px;height: 100%;width: 100%'></select>");txt.append(assayDataCollatorOptions);// 失去焦點，保存值,與服務器交互txt.change(function () {var newText = $(this).select2('data').text;var newVal = $(this).val();var value = param + "," + newVal;$.ajax({type: 'POST',url: ctx + "/biz/assay-item-data/update",data: {value: value},dataType: 'JSON',success: function (res) {var message = res.message;// 移除文本框,顯示新值td.find('div').remove();a.text(newText);td.append(a);},error: function () {}});});// 清空原有值td.text("");// 綁定元素td.append(txt);// 獲取焦點txt.focus();// select2txt.select2({width: 100 + "%", placeholder: "請選擇", allowClear: true});}// 檢測完成時間else if (header == "finishAssayTime") {// 未執行回調函數var frontdiv = $('#test5').parent('div').attr("id");if (frontdiv != "saveInput") {// 之前td移除之前，顯示a標簽var fronttd = $('#test5').parent('td');fronttd.find('a').css("display", "");}// 隱藏a標簽td.find('a').css("display", "none");// 綁定元素td.append($('#test5'));}} });

layDate控件的使用

// 初始化，默認值 laydate.render({elem: '#test5',value: getDatetime(),isInitValue: true, });// laydate，回調函數 laydate.render({elem: '#test5',type: 'datetime',done: function (value, date, endDate) {$('#test5').attr("value", value);var id = $('#test5').parent('td').parent('tr').find('td').eq(0).find('input').val();var dataValue = "finishAssayTime" + "," + id + "," + value;$.ajax({type: 'POST',url: ctx + "/biz/assay-item-data/update",data: {value: dataValue},dataType: 'JSON',success: function (res) {var message = res.message;// 移除文本框，顯示新值var td = $('#test5').parent('td');// input，賦給某個隱藏元素var input = $('#test5');$('#saveInput').append(input);// 清空，拼接tdtd.empty();var a = $("<a></a>");var pkValue = "finishAssayTime" + "," + id;a.attr("data-pk", pkValue);a.text(value);td.append(a);},error: function () {}});} });

Append拼接元素
當頁面加載的時候，沒有這些元素，沒有被CSS和JS渲染

Input不需要渲染
Select2設置值之后，調用select2()方法，將select變成select2控件
datetime控件使用的layDate，在頁面加載的時候，放在頁面隱藏的div中，append獲取該元素之后，就會顯示
頁面元素

<div id="saveInput" style="display: none"><input path="finishAssayTime" type="text" class="demo-input" placeholder="時間選擇器" id="test5" value=""style="height: 22px;width:100%;margin: 0px;padding: 0px;"/> </div>

失去焦點移除datetime控件的時，需要先將該控件賦給某個頁面元素
如果，直接移除，無法再次獲取到該元素undefined，在清空td，或者tbody之前先賦值給某個隱藏元素

總結

以上是生活随笔為你收集整理的jQuery表格的行编辑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。