首页
所有分类
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 相关文章推荐
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
前台js调用后台方法示例
Dec 02 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
了解重排与重绘
May 29 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
JavaScript的Set数据结构详解
Feb 18 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
Grundig(1) 德生PL330(2) 山进(2) 飞利浦(2) L4X25T(1) D1835(1) SANGEAN(1) PHILIPS(3) D1875(1) ATS-909X(1)
You might like
PHP中的integer类型使用分析
2010/07/27 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
JavaScript面象对象设计
2008/04/28 Javascript
javascript针对DOM的应用分析（二）
2012/04/15 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用（三）
2017/06/04 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
js实现时钟定时器
2020/03/26 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
深入讲解Python编程中的字符串
2015/10/14 Python
python的else子句使用指南
2016/02/27 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
区域销售经理岗位职责
2013/12/10 职场文书
《将心比心》教学反思
2014/04/08 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书