jquery動態新增刪除(tr/td)_javascript技巧

程式碼很簡單，實現的功能也很簡單，有需要的小夥伴參考下吧。

複製程式碼 程式碼如下:

    標題>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
        /* jquery easyui 操作*/
        window.onload = function () {
            InitGird();
        }
        //載入編輯器
        var 編輯器；
        $(函數 () {
            editor = KindEditor.create('textarea[name="Describe"]', {
                調整大小類型：1,
                uploadJson: '../ashx/upload_ajax.ashx?action=EditorFile&IsWater=1',
                fileManagerJson: '../ashx/upload_ajax.ashx?action=ManagerFile',
                允許檔案總管：true
            });
        });
        //初始化上傳控制項
        $(函數 () {
            InitSWFUpload("../ashx/upload_ajax.ashx", "檔案資料", "1024 KB", "../../script/swfupload/swfupload.swf", 1, 1);
        });
        //搜尋
        函數搜尋() {
            $('#dgCaseInfo').datagrid('load', {
                操作：“loadListPage”，
                名稱：$("#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: '描述', width: 100, align: 'left', hidden: true },
                      { field: 'FilePath', title: '案例jquery動態新增刪除(tr/td)_javascript技巧', width: 100, align: 'left',
                          formatter: function (value, row, index) {
                             if (row.FilePath != "") {
return ' a>'
                              } } {
                                  return "暫沒有圖片                               }
                          }
                      },
                      { field: 'Flag', title: '狀態', width: 100, align: 'left',
'狀態', width: 100, align: 'left',
                          formatter: function (value, row, index) {
                             if (row.Flag == 0) {
                                  return "已上架";
                              } } {
                                  return "已下架";
                              }
                          }
                      },
                                   { field: 'TypeID', title: '商品型態』, width: 100, align: 'left', hidden: true },
                     , field: 'MonadID', title: '企業名稱', width: 100, align: 'left', hidden: '企業名稱', width: 100, align: 'left', hidden: true },
                     , field: 'MonadName', title: '企業名稱', width: 100, align: 'left', hidden: '企業名稱', 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,
                        且為 一點
                    });
                    $('#SeckillDateEnd').datetimebox({
                        required: true,
                        且為 一點
                    });
                }
                $('#form1').form('load', row);
                $("#Flag ").val(row["Flag"]); //設定狀態值
            }
        }
        //儲存資料
        function Save() {
            editor.sync();
            $('#form1').form('submit', {
                url: url,
                onSubmit: function () {
                    return $(this).form('validate');
                },
                成功：函數（結果）{
                    if (結果                         $.messager.show({
                           「且「錯誤」，並
                           訊息：結果.errorMsg
                        });
                    } 其他 {
                        $('#dlg').dialog('關閉');        // 關閉對話方塊>                         $('#dgCaseInfo').datagrid('重新載入');    //重新載入使用者
使用者
                    }
                }
            });
        }
        //刪除一筆資料
        函數 destroy() {
            var row = $('#dgCaseInfo').datagrid('getSelected');
            若（使用）{
                $.messager.confirm('訊息提示』, '確定刪除嗎？', function (r) {
                    若 (r) {
                        $.post('../ashx/GetSm_CaseInformation.ashx?types=ListDel',
                                { id: 10 },
                                 地                                                                           🎜>                                                                                                                                                                                                                                                                                                                                                 }, '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
            }); 
        }
   


   
   
   

       

                            onclick="Add()">添加                     plain="true" onclick="Edit()">编辑                         iconcls="icon-remove" plain="true" onclick="destroy()">删除
       

        产品名称：
                    data-options="iconCls:'icon-search'">搜索
   

   

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

            产品信息

       

                    cellspacing="1">
           
               
                   
                   
               
           
           
               
                    商品名稱：
               
               
                   
               
               
                    商品類型：
               
               
                   
               
           
           
               
                    商品價格：
               
               
                   
               
               
                    商品折扣：
               
               
                   
               
           
           
               
                    庫存數量：
               
               
                   
               
               
                    售出件數：
               
               
                   
               
           
           
               
                    狀       狀態：
               
               
                    上架   
                    下架
               
               
                   是否熱銷：
               
               
                    正常   
                    熱銷
               
           
           
               
                    秒殺狀態：
               
               
                    正常   
                    秒杀
               
               
                 
               至
                --%>
           
           
               
                    产品jquery動態新增刪除(tr/td)_javascript技巧：
               
               
                   

                                                    MaxLength="255">
                       
                           
                        正在上传，请稍候...
                   

               
           
           
               
                    描      描述：
               
               
                                            runat="server">
               
           
        表>
        表格>
   

   

       
            保存                 onclick="javascript:$('#dlg').dialog('close')">取消
   

身體>

以上就是本文的全部內容了，希望大家能夠喜歡。