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 '<a href=javascript:ShowBigview(' + index + ')><img alt="照片" src="../..' + row.FilePath + '"width="100px" height="25px"/></a>'

　　} 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()); //设置<image id="imageCaseUrl">的url

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

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

　　{

　　$("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="width:80px;">秒杀时间：</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"]); //设置状态值

　　}

　　//保存数据

　　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('大图预览', '<img alt="" src=../..' + row["FilePath"] + ' width="100px" height="100px" />');

　　} else {

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

　　}

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

　　function DisDate() {

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

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

　　}

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

　　function HideDate() {

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

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

　　//初始化easyui日期控件

　　$('#SeckillDateBegin').datetimebox({

　　required: true,

　　showSeconds: false

　　});

　　$('#SeckillDateEnd').datetimebox({

　　required: true,

　　showSeconds: false

　　});

　　}

　　</script>

　　</head>

　　<body>

　　</table>

　　<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>

　　产品名称：<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>

　　<table id="table_edit" class="tab" style="width: 98%; font-size: 12px; border: 1px #E1E1E1 solid" cellpadding="0"

　　cellspacing="1">

　　</td>

　　</tr>

　　商品名称：

　　</td>

　　</td>

　　商品类型：

　　</td>

　　</td>

　　</tr>

　　商品价格：

　　</td>

　　</td>

　　商品折扣：

　　</td>

　　</td>

　　</tr>

　　库存数量：

　　</td>

　　</td>

　　卖出件数：

　　</td>

　　</td>

　　</tr>

　　状态：

　　</td>

　　上架<input name="Flag" type="radio" value="0" />

　　下架<input name="Flag" type="radio" value="1" />

　　</td>

　　是否热销：

　　</td>

　　正常<input name="IsHotSell" type="radio" value="0" />

　　热销<input name="IsHotSell" type="radio" value="1" />

　　</td>

　　</tr>

　　秒杀状态：

　　</td>

　　正常<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="SeckillDateEnd" disabled="disabled" class="easyui-datetimebox" name="SeckillDateEnd" data-options="required:true,showSeconds:false" style="width:150px">

　　</td>--%>

　　</tr>

　　产品照片：

　　</td>

　　<div>

　　<asp:TextBox ID="FilePath" name="FilePath" runat="server" CssClass="txtInput normal left"

　　MaxLength="255"></asp:TextBox>

　　</div>

　　</td>

　　</tr>

　　描述：

　　</td>

　　<textarea id="Describe" name="Describe" style="width: 99%; height: 100px; visibility: hidden;"

　　runat="server"></textarea>

　　</td>

　　</tr>

　　</table>

　　</form>

　　</div>

　　保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"

　　onclick="javascript:$('#dlg').dialog('close')">取消</a>

　　</div>

　　</body>

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

教程首页更多教程