首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 09, 2015

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

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

                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

            $("#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

            });  

        }

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

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

            产品信息</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;">

                    商品价格：

                </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;">

                    库存数量：

                </td>

                <td class="tab_td_left">

                    <input id="InventoryNumber" name="InventoryNumber" style="width: 150px" />

                </td>

                <td class="tab_td_right" style="width:80px;">

                    卖出件数：

                </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;">

                    状       态：

                </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;">

                    秒杀状态：

                </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;">

                    产品照片：

                </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">正在上传，请稍候...</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>

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
DOM 基本方法
Jul 18 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
js实现中文实时时钟
Jan 15 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 #Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 #Javascript
jquery动态改变div宽度和高度
Feb 09 #Javascript
angularJS结合canvas画图例子
Feb 09 #Javascript
jquery实现上下左右滑动的方法
Feb 09 #Javascript
js实现上传图片预览的方法
Feb 09 #Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 #Javascript
飞利浦(2) D1835(1) SANGEAN(1) D1875(1) L4X25T(1) PHILIPS(3) 山进(2) 德生PL330(2) 德生9700DX(1) ATS-909X(1)
You might like
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jQuery基础知识小结
2014/12/22 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
英国内衣连锁店：Boux Avenue
2018/01/24 全球购物
小学美术教学反思
2014/02/01 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
运动会加油口号
2014/06/07 职场文书
幼师个人总结范文
2015/02/28 职场文书
历史名人教你十五个读书方法，赶快Get起来！
2019/07/18 职场文书
六年级情感作文之500字
2019/10/23 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技