jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能示例
更新時(shí)間：2019年02月19日 11:13:54 作者：sning999
這篇文章主要介紹了jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)table表格行動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能。分享給大家供大家參考，具體如下：
HTML頁(yè)面元素如下：
<!-- 訂單明細(xì)dialog -->
<div id="contractDetailDiv" title="銷售訂單明細(xì)" style="display:none;">
<table class="exhibit_table" id="contractDetailTab" border="1">
<tr>
<td>訂單合同號(hào)</td>
<td colspan="4" id="orderId"></td>
</tr>
<tr>
<td>捆包號(hào)</td>
<td>品名</td>
<td>規(guī)格</td>
<td>材質(zhì)</td>
<td>重量</td>
</tr>
</table>
</div>
業(yè)務(wù)需求是，從后臺(tái)獲取到訂單合同下的明細(xì)信息，然后動(dòng)態(tài)添加到上面的表格中，做法是：
1. 在jqgrid表格中為每一列添加一個(gè)“訂單明細(xì)”的圖標(biāo)，如下所示：
jQuery(function($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
jQuery(grid_selector).jqGrid({
data: grid_data,
datatype: "local", //從服務(wù)器端返回的數(shù)據(jù)類型
height: 400, //表格高度，可以是數(shù)字，像素值或者百分比
/****列顯示名稱******/
colNames:['id', '訂單合同號(hào)', '收貨單位', '提貨方式', '物資來源', '物資來源廠商名稱', '訂單總重量', '綁定合同號(hào)來源', '綁定合同號(hào)', '訂單狀態(tài)', '訂單明細(xì)'],
/****常用到的屬性：name 列顯示的名稱；index 傳到服務(wù)器端用來排序用的列名稱；width 列寬度；align 對(duì)齊方式；sortable 是否可以排序******/
colModel:[
{name:'id',index:'id', width:0, sorttype:"int", editable: true, hidden:true},
{name:'goodsOrder', index:'goodsOrder', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsReceiveCompany', index:'goodsReceiveCompany', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsDeliveryMode', index:'goodsDeliveryMode', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}},
{name:'originName', index:'originName', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}},
{name:'contractWeight', index:'contractWeight', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}, formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"", decimalPlaces:3}},
{name:'purchaseContractOrigin', index:'purchaseContractOrigin', width:60, sortable:false, editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'purchaseContractOriginVal', index:'purchaseContractOriginVal', width:60, sortable:false, editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'contractStatus', index:'contractStatus', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}},
{name:'myac222', index:'', width:120, fixed:true, sortable:false, resize:false, align:'center',
formatter: function (value, grid, rows, state) {
return "<a href=\"#\" title=\"訂單明細(xì)\" style=\"margin-left:10px\" onclick=\"contractDetail(" + rows.id + ")\"><i class=\"icon-bar-chart blue\" style=\"font-size:15px\"></i></a>";
}
}
],
loadonce: true, //一次加載全部數(shù)據(jù)到客戶端，由客戶端進(jìn)行排序。
sortable: true,
rownumbers: true, //添加左側(cè)行號(hào)
viewrecords: true, //定義是否要顯示總記錄數(shù)
rowNum: 10, //在grid上顯示記錄條數(shù)，這個(gè)參數(shù)是要被傳遞到后臺(tái)
rowList: [10,20,30], //一個(gè)下拉選擇框，用來改變顯示記錄數(shù)，當(dāng)選擇時(shí)會(huì)覆蓋rowNum參數(shù)傳遞到后臺(tái)
pager: pager_selector, //定義翻頁(yè)用的導(dǎo)航欄，必須是有效的html元素。翻頁(yè)工具欄可以放置在html頁(yè)面任意位置
altRows: true, //設(shè)置為交替行表格,默認(rèn)為false
//toppager: true,
multiselect: true, //定義是否可以多選
//multikey: "ctrlKey", //只有在multiselect設(shè)置為ture時(shí)起作用，定義使用那個(gè)key來做多選。shiftKey，altKey，ctrlKey
multiboxonly: true, //只有當(dāng)multiselect = true.起作用，當(dāng)multiboxonly 為ture時(shí)只有選擇checkbox才會(huì)起作用
gridComplete:function(){ //在此事件中循環(huán)為每一行添加修改和刪除鏈接
},
loadComplete : function() {
$(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
var table = this;
setTimeout(function(){
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
editurl: "???", //定義對(duì)form編輯時(shí)的url
caption: "銷售訂單列表", //表格名稱
autowidth: true //如果為ture時(shí)，則當(dāng)表格在首次被創(chuàng)建時(shí)會(huì)根據(jù)父元素比例重新調(diào)整表格寬度。如果父元素寬度改變，為了使表格寬度能夠自動(dòng)調(diào)整則需要實(shí)現(xiàn)函數(shù)：setGridWidth
});
上面添加“訂單明細(xì)”的圖標(biāo)時(shí)，為其綁定了onclick事件，此事件將傳遞每一行的id給綁定函數(shù)。
2. 在綁定函數(shù)中首先獲取onclick傳遞過來的行id，通過此行id可訪問該行的每個(gè)字段的數(shù)據(jù)。然后在此綁定函數(shù)中通過ajax從后臺(tái)獲取到“訂單明細(xì)”的具體數(shù)據(jù)，再通過append方法將獲取到的數(shù)據(jù)動(dòng)態(tài)添加到table表格中。最后，將此table表格所在的div以dialog的形式彈出來展示給用戶。如下：
/*********合同明細(xì)彈出框************/
function contractDetail(id){
$("#contractDetailTab tr:gt(0)").empty();
var rowData = $("#grid-table").jqGrid('getRowData',id);
var purchaseContractOrder = rowData.purchaseContractOriginVal;
$("#orderId").html(rowData.goodsOrder);
//請(qǐng)求合同明細(xì)數(shù)據(jù)
$.ajax({
async:false,
cache:true,
type: "GET",
url: "goods_findPagePurchaseOrderDetail.do?purchaseContractOrder="+purchaseContractOrder, //獲取json數(shù)據(jù)
success: function(result){
var result = eval('('+ result +')');
if(result.root != undefined && result.root.length > 0){
var resultContent = result.root;
for (var i = 0; i < resultContent.length; i++) {
$("#contractDetailTab").append("<tr><td>捆包號(hào)</td><td>品名</td><td>規(guī)格</td><td>材質(zhì)</td><td>重量</td></tr><tr><td>"+resultContent[0][0]+"</td><td>"+resultContent[0][1]+"</td><td>"+resultContent[0][2]+"</td><td>"+resultContent[0][3]+"</td><td>"+resultContent[0][5]+"</td></tr>");
}
$("#contractDetailDiv").dialog({
autoOpen:true,
height:300,
width:450,
resizable:false,
modal:true,
});
} else {
alert("該訂單合同下無明細(xì)信息！");
}
},
error: function() {
alert("獲取合同明細(xì)失敗")
}
});
}
這里需要注意的是，每次動(dòng)態(tài)添加新的明細(xì)之前，需要將上一次的明細(xì)信息清空，即使用empty方法將上一次動(dòng)態(tài)添加的tr先刪除掉，然后再動(dòng)態(tài)添加新的明細(xì)信息。
動(dòng)態(tài)刪除除第一行以外的其他tr：
$("#contractDetailTab tr:gt(0)").empty();
$("#contractDetailTab tr").not(':eq(0)').empty();
動(dòng)態(tài)添加tr：
復(fù)制代碼 代碼如下:
$("#contractDetailTab").append("<tr><td>捆包號(hào)</td><td>品名</td><td>規(guī)格</td><td>材質(zhì)</td><td>重量</td></tr><tr><td>"+resultContent[0][0]+"</td><td>"+resultContent[0][1]+"</td><td>"+resultContent[0][2]+"</td><td>"+resultContent[0][3]+"</td><td>"+resultContent[0][5]+"</td></tr>");
動(dòng)態(tài)刪除除第一行和最后一行以外的其他tr：
$("#contractDetailTab tr:not(:first):not(:last)").remove();
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery操作xml技巧總結(jié)》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)獲取table表格第一列值的方法
- JQuery Ajax動(dòng)態(tài)生成Table表格
- jQuery對(duì)table表格進(jìn)行增刪改查
- 基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼
- JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
- 使用jQuery操作HTML的table表格的實(shí)例解析
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- jQuery實(shí)現(xiàn)table表格checkbox全選的方法分析
- jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
- jQuery實(shí)現(xiàn)table表格信息的展開和縮小功能示例
- jQuery動(dòng)態(tài)操作表單示例【基于table表格】
相關(guān)文章
jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
這篇文章主要介紹了jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法,實(shí)例分析了針對(duì)jQuery中slideUp、slideDown、animate等動(dòng)畫運(yùn)用時(shí)出現(xiàn)的滯后反復(fù)執(zhí)行等問題的解決方法,需要的朋友可以參考下2015-01-01
Jquery Ajax學(xué)習(xí)實(shí)例4 向WebService發(fā)出請(qǐng)求，返回實(shí)體對(duì)象的異步調(diào)用
Jquery Ajax學(xué)習(xí)實(shí)例4-向WebService發(fā)出請(qǐng)求，返回實(shí)體對(duì)象的異步調(diào)用2010-03-03
一個(gè)簡(jiǎn)單的jQuery插件制作 學(xué)習(xí)過程及實(shí)例
本文僅供參考，如有不足或錯(cuò)誤，請(qǐng)不吝賜教，這里以一個(gè)彈出層的jQuery插件制作實(shí)例為基礎(chǔ)，進(jìn)行插件制作的說明。2010-04-04
jQuery簡(jiǎn)單獲取DIV和A標(biāo)簽元素位置的方法
這篇文章主要介紹了jQuery簡(jiǎn)單獲取DIV和A標(biāo)簽元素位置的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面div及A標(biāo)簽元素相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
jQuery實(shí)現(xiàn)大屏滾動(dòng)播放效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)大屏滾動(dòng)播放效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
jquery驗(yàn)證手機(jī)號(hào)碼、郵箱格式是否正確示例代碼
本文為大家介紹下使用jquery驗(yàn)證郵箱、驗(yàn)證手機(jī)號(hào)碼，具體實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以學(xué)習(xí)下2013-07-07
這篇文章主要介紹了jQuery EasyUI提交表單驗(yàn)證的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
下面小編就為大家?guī)硪黄猨query屬性,遍歷,HTML操作方法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
jquery實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴菜單效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴菜單效果的方法,實(shí)例分析了jQuery操作頁(yè)面樣式、html頁(yè)面布局及SCSS樣式設(shè)置的相關(guān)技巧,需要的朋友可以參考下2015-06-06
Jquery uploadify圖片上傳插件無法上傳的解決方法
很多的朋友都有遇到Jquery uploadify圖片上傳插件無法上傳的情況，下面為大家介紹下不錯(cuò)的解決方法，感興趣的朋友可以參考下2013-12-12