ajax删除tr,jquery动态添加删除(tr/td)

代码很简单，实现的功能也很简单，有需要的小伙伴参考下吧。

/* 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', //请求数据的页面

sortName: 'ID', //排序字段

idField: 'ID', //标识字段,主键

iconCls: '', //标题左边的图片

singleSelect: true,

width: '100%', //宽度

height: 'auto', //高度

nowrap: true, //是否换行，True 就会把数据显示在一行里

striped: true, //True 奇偶行使用不同背景色

collapsible: false, //可折叠

sortOrder: 'desc', //排序类型

remoteSort: true, //定义是否从服务器给数据排序

fit: true,

singleSelect: true, //是否只允许选择一行

selectOnCheck: false, //单击复选框不会选中行

fitColumns: true, //列自动缩放

columns: [[

{ field: 'Name', title: '商品名称', width: 200, align: 'left' },

{ field: 'Add_Time', title: '添加时间', 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 ''

} else {

return "暂无图片"

}

}

},

{ field: 'Flag', title: '状态', 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: '企业名称', width: 100, align: 'left', hidden: true },

{ field: 'MonadName', title: '企业名称', width: 100, align: 'left', hidden: true }

]],

toolbar: "#toolbar",

queryParams: { "action": "query" },

pagination: true, //是否开启分页

pagePosition: 'bottom', //分页位置

pageNumber: 1, //默认索引页

pageSize: 10, //默认一页数据条数

onDblClickRow: function (rowIndex, rowData) {//行双击事件

Edit();

}

})

}

var url;

//添加一条数据

function Add() {

$("#tdLeft").remove();//删除秒杀时间td

$("#tdSeckill").remove(); //删除秒杀时间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(); //删除秒杀时间td

$("#tdSeckill").remove(); //删除秒杀时间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()); //设置的url

editor.html(row["Describe"]);

if (row["IsSeckill"]==1)//如果该商品是秒杀状态 则：

{

$("#trSeckill").append('

秒杀时间： 至')

//初始化easyui日期控件

$('#SeckillDateBegin').datetimebox({

required: true,

showSeconds: false

});

$('#SeckillDateEnd').datetimebox({

required: true,

showSeconds: false

});

}

$('#form1').form('load', row);

$("#Flag ").val(row["Flag"]); //设置状态值

}

}

//保存数据

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

}

}

});

}

//删除一条数据

function destroy() {

var row = $('#dgCaseInfo').datagrid('getSelected');

if (row) {

$.messager.confirm('消息提示', '确定要删除吗？', 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'

});

}

//点击图片后激发

function ShowBigview(rowIndex) {

var row = $("#dgCaseInfo").datagrid('getRows')[rowIndex];

if (row["FilePath"].toString() != "") {

                $.messager.alert('大图预览', '');

} else {

$.messager.alert('消息提示', '未设置标题图片！');

}

}

//点击单选按钮 正常时激发

function DisDate() {

$("#tdLeft").remove(); //删除秒杀时间td

$("#tdSeckill").remove(); //删除秒杀时间td

}

//点击单选按钮 秒杀时激发

function HideDate() {

$("#tdLeft").remove(); //删除秒杀时间td

$("#tdSeckill").remove(); //删除秒杀时间td

$("#trSeckill").append('

秒杀时间： 至')

//初始化easyui日期控件

$('#SeckillDateBegin').datetimebox({

required: true,

showSeconds: false

});

$('#SeckillDateEnd').datetimebox({

required: true,

showSeconds: false

});

}

οnclick="Add()">添加

plain="true" οnclick="Edit()">编辑

iconcls="icon-remove" plain="true" οnclick="destroy()">删除

产品名称：

data-options="iconCls:'icon-search'">搜索

closed="true" buttons="#dlg-buttons">

产品信息

cellspacing="1">

商品名称：

商品类型：

商品价格：

商品折扣：

库存数量：

卖出件数：

状       态：

上架&nbsp&nbsp&nbsp

下架

是否热销：

正常&nbsp&nbsp&nbsp

热销

秒杀状态：

正常&nbsp&nbsp&nbsp

秒杀

至

--%>

产品照片：

MaxLength="255">

正在上传，请稍候...

描       述：

runat="server">

保存

οnclick="javascript:$('#dlg').dialog('close')">取消

以上就是本文的全部内容了，希望大家能够喜欢。