jquery動(dòng)態(tài)添加刪除(tr/td)
更新時(shí)間：2015年02月09日 16:59:41 投稿：hebedich
這篇文章主要介紹了jquery動(dòng)態(tài)添加刪除(tr/td)的方法,需要的朋友可以參考下
代碼很簡(jiǎn)單，實(shí)現(xiàn)的功能也很簡(jiǎn)單，有需要的小伙伴參考下吧。
復(fù)制代碼 代碼如下:
<head runat="server">
<title></title>
<!--easyui -->
<link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../../script/easy_ui/themes/demo.css" />
<link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/default/easyui.css" />
<link href="../../css/function.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../script/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_TW.js"></script>
<script type="text/javascript" src="../../script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
<!--上傳控件 -->
<link href="../../css/images/style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="../../script/swfupload/swfupload.js"></script>
<script type='text/javascript' src="../../script/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="../../script/swfupload/swfupload.handlers.js"></script>
<script src="../../script/jquery.form.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/function.js"></script>
<!--編輯器 -->
<script type="text/javascript" charset="utf-8" src="../../editor/kindeditor-min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../editor/lang/zh_CN.js"></script>
<script type="text/javascript">
/* jquery easyui 操作*/
window.onload = function () {
InitGird();
}
//加載編輯器
var editor;
$(function () {
editor = KindEditor.create('textarea[name="Describe"]', {
resizeType: 1,
uploadJson: '../ashx/upload_ajax.ashx?action=EditorFile&IsWater=1',
fileManagerJson: '../ashx/upload_ajax.ashx?action=ManagerFile',
allowFileManager: true
});
});
//初始化上傳控件
$(function () {
InitSWFUpload("../ashx/upload_ajax.ashx", "Filedata", "1024 KB", "../../script/swfupload/swfupload.swf", 1, 1);
});
//搜索
function Search() {
$('#dgCaseInfo').datagrid('load', {
action: "loadListPage",
Names: $("#Names").val()
});
}
//初始化表格
function InitGird() {
$("#dgCaseInfo").datagrid({
autoRowHeight: false,
loadMsg: '正在努力加載中...',
url: '../ashx/GetSm_CaseInformation.ashx?types=loadListPage', //請(qǐng)求數(shù)據(jù)的頁(yè)面
sortName: 'ID', //排序字段
idField: 'ID', //標(biāo)識(shí)字段,主鍵
iconCls: '', //標(biāo)題左邊的圖片
singleSelect: true,
width: '100%', //寬度
height: 'auto', //高度
nowrap: true, //是否換行，True 就會(huì)把數(shù)據(jù)顯示在一行里
striped: true, //True 奇偶行使用不同背景色
collapsible: false, //可折疊
sortOrder: 'desc', //排序類型
remoteSort: true, //定義是否從服務(wù)器給數(shù)據(jù)排序
fit: true,
singleSelect: true, //是否只允許選擇一行
selectOnCheck: false, //單擊復(fù)選框不會(huì)選中行
fitColumns: true, //列自動(dòng)縮放
columns: [[
{ field: 'Name', title: '商品名稱', width: 200, align: 'left' },
{ field: 'Add_Time', title: '添加時(shí)間', width: 100, align: 'left' },
{ field: 'Describe', title: '描述', width: 100, align: 'left', hidden: true },
{ field: 'FilePath', title: '案例照片', width: 100, align: 'left',
formatter: function (value, row, index) {
if (row.FilePath != "") {
return '<a href=javascript:ShowBigview(' + index + ')><img alt="照片" src="../..' + row.FilePath + '"width="100px" height="25px"/></a>'
} else {
return "暫無(wú)圖片"
}
}
},
{ field: 'Flag', title: '狀態(tài)', width: 100, align: 'left',
formatter: function (value, row, index) {
if (row.Flag == 0) {
return "上架";
} else {
return "下架";
}
}
},
{ field: 'TypeID', title: '商品類型', width: 100, align: 'left', hidden: true },
{ field: 'MonadID', title: '企業(yè)名稱', width: 100, align: 'left', hidden: true },
{ field: 'MonadName', title: '企業(yè)名稱', width: 100, align: 'left', hidden: true }
]],
toolbar: "#toolbar",
queryParams: { "action": "query" },
pagination: true, //是否開啟分頁(yè)
pagePosition: 'bottom', //分頁(yè)位置
pageNumber: 1, //默認(rèn)索引頁(yè)
pageSize: 10, //默認(rèn)一頁(yè)數(shù)據(jù)條數(shù)
onDblClickRow: function (rowIndex, rowData) {//行雙擊事件
Edit();
}
})
}
var url;
//添加一條數(shù)據(jù)
function Add() {
$("#tdLeft").remove();//刪除秒殺時(shí)間td
$("#tdSeckill").remove(); //刪除秒殺時(shí)間td
loadTypeID();
editor.html("");
$('#dlg').dialog('open').dialog('setTitle', '添加');
$('#form1').form('clear');
url = '../ashx/GetSm_CaseInformation.ashx?types=ListAdd';
$("input[name='Flag']").eq(0).attr('checked', 'true');
}
//編輯修改
function Edit() {
$("#tdLeft").remove(); //刪除秒殺時(shí)間td
$("#tdSeckill").remove(); //刪除秒殺時(shí)間td
loadTypeID();
url = '../ashx/GetSm_CaseInformation.ashx?types=ListEdit';
var row = $('#dgCaseInfo').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '修改');
$("#imageCaseUrl").attr("src", "../.." + $('#FilePath').val()); //設(shè)置<image id="imageCaseUrl">的url
editor.html(row["Describe"]);
if (row["IsSeckill"]==1)//如果該商品是秒殺狀態(tài) 則：
{
$("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="width:80px;">秒殺時(shí)間：</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin" class="easyui-datetimebox" name="SeckillDateBegin" style="width:150px"> 至<input id="SeckillDateEnd" class="easyui-datetimebox" name="SeckillDateEnd" style="width:150px"></td>')
//初始化easyui日期控件
$('#SeckillDateBegin').datetimebox({
required: true,
showSeconds: false
});
$('#SeckillDateEnd').datetimebox({
required: true,
showSeconds: false
});
}
$('#form1').form('load', row);
$("#Flag ").val(row["Flag"]); //設(shè)置狀態(tài)值
}
}
//保存數(shù)據(jù)
function Save() {
editor.sync();
$('#form1').form('submit', {
url: url,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
if (result <= 0) {
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dgCaseInfo').datagrid('reload'); // reload the user data
}
}
});
}
//刪除一條數(shù)據(jù)
function destroy() {
var row = $('#dgCaseInfo').datagrid('getSelected');
if (row) {
$.messager.confirm('消息提示', '確定要?jiǎng)h除嗎？', function (r) {
if (r) {
$.post('../ashx/GetSm_CaseInformation.ashx?types=ListDel',
{ id: row.ID },
function (result) {
if (result > 0) {
$('#dgCaseInfo').datagrid('reload'); // reload the user data
} else {
$.messager.show(
{ // show error message
title: 'Error',
msg: result.errorMsg
}
);
}
}, 'json');
}
});
}
}
//加載商品類型
function loadTypeID() {
$('#TypeID').combobox({
url: '../ashx/GetSm_CaseInformation.ashx?types=TypeIDLoad',
valueField: 'ID',
textField: 'DtyName'
});
}
//點(diǎn)擊圖片后激發(fā)
function ShowBigview(rowIndex) {
var row = $("#dgCaseInfo").datagrid('getRows')[rowIndex];
if (row["FilePath"].toString() != "") {
$.messager.alert('大圖預(yù)覽', '<img alt="" src=../..' + row["FilePath"] + ' width="100px" height="100px" />');
} else {
$.messager.alert('消息提示', '未設(shè)置標(biāo)題圖片！');
}
}
//點(diǎn)擊單選按鈕 正常時(shí)激發(fā)
function DisDate() {
$("#tdLeft").remove(); //刪除秒殺時(shí)間td
$("#tdSeckill").remove(); //刪除秒殺時(shí)間td
}
//點(diǎn)擊單選按鈕 秒殺時(shí)激發(fā)
function HideDate() {
$("#tdLeft").remove(); //刪除秒殺時(shí)間td
$("#tdSeckill").remove(); //刪除秒殺時(shí)間td
$("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="width:80px;">秒殺時(shí)間：</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin" class="easyui-datetimebox" name="SeckillDateBegin" style="width:150px"> 至<input id="SeckillDateEnd" class="easyui-datetimebox" name="SeckillDateEnd" style="width:150px"></td>')
//初始化easyui日期控件
$('#SeckillDateBegin').datetimebox({
required: true,
showSeconds: false
});
$('#SeckillDateEnd').datetimebox({
required: true,
showSeconds: false
});
}
</script>
</head>
<body>
<table id="dgCaseInfo">
</table>
<div id="toolbar" style="width: 100%">
<div style="padding-top: 5px; width: 100%">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"
onclick="Add()">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit"
plain="true" onclick="Edit()">編輯</a> <a href="javascript:void(0)" class="easyui-linkbutton"
iconcls="icon-remove" plain="true" onclick="destroy()">刪除</a>
</div>
產(chǎn)品名稱：<input id="Names" name="Names" class="easyui-validatebox" type="text" />
<a id="search" href="#" onclick="Search()" class="easyui-linkbutton" plain="true"
data-options="iconCls:'icon-search'">搜索</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:800px; height: 400px; padding: 10px;"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">
產(chǎn)品信息</div>
<form id="form1" runat="server" method="post">
<table id="table_edit" class="tab" style="width: 98%; font-size: 12px; border: 1px #E1E1E1 solid" cellpadding="0"
cellspacing="1">
<tr class="tab_tr" style="display: none;">
<td colspan="4">
<input name="ID" class="easyui-validatebox" />
<input name="MonadID" class="easyui-validatebox" />
</td>
</tr>
<tr style="height: 26px;" class="tab_tr">
<td class="tab_td_right" style="width:80px;">
商品名稱：
</td>
<td class="tab_td_left">
<input name="Name" class="easyui-validatebox" required="true" style="width:150px" />
</td>
<td class="tab_td_right" style="width:80px;">
商品類型：
</td>
<td class="tab_td_left">
<input id="TypeID" name="TypeID" style="width: 200px" required="true" />
</td>
</tr>
<tr style="height: 26px; " class="tab_tr">
<td class="tab_td_right" style="width:80px;">
商品價(jià)格：
</td>
<td class="tab_td_left">
<input name="Price" class="easyui-validatebox" required="true" style="width: 150px" />
</td>
<td class="tab_td_right" style="width:80px;">
商品折扣：
</td>
<td class="tab_td_left">
<input id="Discount" name="Discount" style="width: 200px" />
</td>
</tr>
<tr style="height: 26px; " class="tab_tr">
<td class="tab_td_right" style="width:80px;">
庫(kù)存數(shù)量：
</td>
<td class="tab_td_left">
<input id="InventoryNumber" name="InventoryNumber" style="width: 150px" />
</td>
<td class="tab_td_right" style="width:80px;">
賣出件數(shù)：
</td>
<td class="tab_td_left">
<input id="SellNumber" name="SellNumber" style="width: 200px" />
</td>
</tr>
<tr style="height: 26px; " class="tab_tr">
<td class="tab_td_right" style="width:80px;">
狀 態(tài)：
</td>
<td class="tab_td_left">
上架<input name="Flag" type="radio" value="0" />   
下架<input name="Flag" type="radio" value="1" />
</td>
<td class="tab_td_right" style="width:80px;">
是否熱銷：
</td>
<td class="tab_td_left">
正常<input name="IsHotSell" type="radio" value="0" />   
熱銷<input name="IsHotSell" type="radio" value="1" />
</td>
</tr>
<tr style="height: 26px; " class="tab_tr" id="trSeckill">
<td class="tab_td_right" style="width:80px;">
秒殺狀態(tài)：
</td>
<td class="tab_td_left" >
正常<input name="IsSeckill" type="radio" value="0" onclick="DisDate()"/>   
秒殺<input name="IsSeckill" type="radio" value="1" onclick="HideDate()"/>
</td>
<%-- <td class="tab_td_left" >
<input id="SeckillDateBegin" disabled="disabled" class="easyui-datetimebox" name="SeckillDateBegin" data-options="required:true,showSeconds:false" style="width:150px">
至<input id="SeckillDateEnd" disabled="disabled" class="easyui-datetimebox" name="SeckillDateEnd" data-options="required:true,showSeconds:false" style="width:150px">
</td>--%>
</tr>
<tr style="height: 26px; " class="tab_tr">
<td class="tab_td_right" style="width:80px;">
產(chǎn)品照片：
</td>
<td class="tab_td_left" colspan="3">
<div>
<asp:TextBox ID="FilePath" name="FilePath" runat="server" CssClass="txtInput normal left"
MaxLength="255"></asp:TextBox>
<a href="javascript:;" class="files">
<input type="file" id="FileUpload" name="FileUpload" onchange="Upload('SingleFile', 'FilePath', 'FileUpload');" /></a>
<span class="uploading">正在上傳，請(qǐng)稍候...</span>
</div>
</td>
</tr>
<tr style="height: 26px;" class="tab_tr">
<td class="tab_td_right" style="width:80px;">
描 述：
</td>
<td class="tab_td_left" colspan="3">
<textarea id="Describe" name="Describe" style="width: 99%; height: 100px; visibility: hidden;"
runat="server"></textarea>
</td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="Save()">
保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
</body>
以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- jquery 如何動(dòng)態(tài)添加、刪除class樣式方法介紹
- jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
- jquery動(dòng)態(tài)添加option示例
- jQuery動(dòng)態(tài)添加的元素綁定事件處理函數(shù)代碼
- jQuery如何獲取動(dòng)態(tài)添加的元素
- jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
- Jquery 獲取指定標(biāo)簽的對(duì)象及屬性的設(shè)置與移除
- jQuery獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法
- JS加jquery簡(jiǎn)單實(shí)現(xiàn)標(biāo)簽元素的顯示或隱藏
- jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法
- jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象示例
相關(guān)文章
javascript中簡(jiǎn)單的進(jìn)制轉(zhuǎn)換代碼實(shí)例
這篇文章介紹了javascript中簡(jiǎn)單的進(jìn)制轉(zhuǎn)換代碼實(shí)例，有需要的朋友可以參考一下2013-10-10
Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
這篇文章主要介紹了Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下2016-05-05
一個(gè)簡(jiǎn)單不報(bào)錯(cuò)的summernote 圖片上傳案例
下面小編就為大家?guī)?lái)一篇一個(gè)簡(jiǎn)單不報(bào)錯(cuò)的summernote圖片上傳案例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片上傳并預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Js實(shí)現(xiàn)兩個(gè)跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參的方案詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)兩個(gè)跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參的方案,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
JS中使用 after 偽類清除浮動(dòng)實(shí)例
這篇文章主要介紹了使用 after 偽類清除浮動(dòng)實(shí)例，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下2017-03-03
超酷的網(wǎng)頁(yè)音樂播放器DewPlayer使用方法
在網(wǎng)上閑逛的時(shí)候無(wú)意中看到 Dewplayer 播放器，感覺不錯(cuò)，特此分享。2010-12-12
JavaScript反彈動(dòng)畫效果的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹了js反彈動(dòng)畫效果的實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-07-07
本文主要分享了原生js實(shí)現(xiàn)打字動(dòng)畫游戲的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登陸與注冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09