首页 / 脚本样式 / JavaScript / jquery动态添加删除（tr/td）

代码很简单，实现的功能也很简单，有需要的小伙伴参考下吧。
复制代码代码如下:
<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>

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