jqueryの動的追加と削除(tr/td)_javascriptスキル

コードは非常にシンプルで、実装されている機能も非常にシンプルなので、必要な方は参照してください。

コードをコピー コードは次のとおりです:

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
        /* jquery easyui 操作*/
        window.onload = function () {
            InitGird();
        }
        //加下编辑器
        var エディタ;
        $(関数() {
            editor = KindEditor.create('textarea[name="説明"]', {
                サイズ変更タイプ: 1、
                UploadJson: '../ashx/upload_ajax.ashx?action=EditorFile&IsWater=1',
                fileManagerJson: '../ashx/upload_ajax.ashx?action=ManagerFile',
                allowedFileManager: true
            });
        });
        //初期化上传制御件
        $(関数() {
            InitSWFUpload("../ashx/upload_ajax.ashx", "ファイルデータ", "1024 KB", "../../script/swfupload/swfupload.swf", 1, 1);
        });
        //搜索
        関数 Search() {
            $('#dgCaseInfo').datagrid('load', {
                アクション: "loadListPage",
                名前: $("#Names").val()
            });
        }
        //初期化表格
関数 InitGird() {
$("#dgCaseInfo").datagrid({
autoRowHeight: false,
loadMsg: '読み込み中...',
url: '../ashx/GetSm_CaseInformation.ashx?types=loadListPage', //データをリクエストするページ
sortName: 'ID', //ソートフィールド
idField: 'ID', //識別フィールド、主キー
iconCls: '', //タイトルの左側の画像
singleSelect: true、
width: '100%', //Width
高さ : 'auto', //高さ
nowrap: true, // 行を折り返すかどうか、True はデータを 1 行で表示します
Striped: true, //True は奇数行と偶数行に異なる背景色を使用します
collapsible: false, //Collapsible
sortOrder: 'desc', //ソートタイプ
RemoteSort: true, //サーバーからのデータを並べ替えるかどうかを定義します
適合: true、
singleSelect: true, // 1 行のみ選択できるかどうか
selectoncheck：false、//チェックボックスをクリックすると行が選択されません
fitColumns: true, //列は自動的にスケールされます
列: [[
{ フィールド: '名前'、タイトル: '商品名'、幅: 200、整列: '左' },
{ フィールド: 'Add_Time'、タイトル: '時間を追加'、幅: 100、位置: 'left' },
{ フィールド: '説明'、タイトル: '説明'、幅: 100、配置: '左'、非表示: true },
{ フィールド: 'ファイルパス'、タイトル: '症例写真'、幅: 100、配置: '左'、
フォーマッタ: 関数 (値、行、インデックス) {
If (row.FilePath != "") {
return ''
} 「写真がありません」を返す
}} },
{ フィールド: 'フラグ'、タイトル: 'ステータス'、幅: 100、整列: '左'、
フォーマッタ: 関数 (値、行、インデックス) {
If (row.Flag == 0) {
「棚にある」を返します
} 「削除済み」を返します
} } },
{ フィールド: 'TypeID'、タイトル: '製品タイプ'、幅: 100、整列: '左'、非表示: true },
{ フィールド: 'MonadID'、タイトル: '会社名'、幅: 100、整列: '左'、非表示: true },
{ フィールド: 'MonadName'、タイトル: '会社名'、幅: 100、整列: '左'、非表示: true }
]]、
ツールバー: "#toolbar",
queryParams: { "アクション": "クエリ" },
ページネーション：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', 'Add');
$('#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 (行) {
$('#dlg').dialog('open').dialog('setTitle', 'Modify');
$("#imageCaseUrl").attr("src", "../.." $('#FilePath').val()); // の URL を設定します。
editor.html(row["説明"]);
If (row["IsSeckill"]==1)//製品がフラッシュ セール ステータスにある場合:
{
$("#trSeckill").append(' Seckill 時間: to ')
// easyui 日付コントロールを初期化します
$('#SeckillDateBegin').datetimebox({
必須: true、
showSeconds: false
});
$('#SeckillDateEnd').datetimebox({
必須: true、
showSeconds: false
});
}
$('#form1').form('load', row);
$("#Flag ").val(row["Flag"]); //ステータス値を設定します
}
}
//データを保存
関数 Save() {
editor.sync();
$('#form1').form('submit', {
url: url,
onSubmit: function () {
                    return $(this).form('validate');
                }、
                成功: 関数 (結果) {
                    if (結果                         $.messager.show({
                            タイトル: 'エラー'、
                            メッセージ: result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // ダイアログを閉じます
                        $('#dgCaseInfo').datagrid('reload');    // ユーザーデータをリロードします
                    }
                }
            });
        }
        //删除一条データベース
        関数 destroy() {
            var row = $('#dgCaseInfo').datagrid('getSelected');
            if (行) {
                $.messager.confirm('消息提示', '确定要删除吗?', function (r) {
                    if (r) {
                        $.post('../ashx/GetSm_CaseInformation.ashx?types=ListDel',
                                { id: row.ID },
                                    関数 (結果) {
                                        if (結果 > 0) {
                                            $('#dgCaseInfo').datagrid('reload');    // ユーザーデータをリロードします
                                        } else {
                                            $.messager.show(
                                        { // エラー メッセージを表示
                                                                                                                                                                                                                                                                                               ​                                                                                                                                                                                                                                                                                                                                                      }
});
}
}
//製品タイプを読み込みます
関数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
}
//ラジオボタンをクリックしてフラッシュセールをトリガーします
関数 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">
       

            产品信息

       

                    セル間隔="1">
           
               
                   
                   
               
           
           
               
                    商品名：
               
               
                   
               
               
                    商品種類：
               
               
                   
               
           
           
               
                    商品価格：
               
               
                   
               
               
                    商品折扣：
               
               
                   
               
           
           
               
                    库存数：
               
               
                   
               
               
                    卖出ブロック：
               
               
                   
               
           
           
               
                    状態 态：
               
               
                    上架   
                    下架
               
               
                   否か热销：
               
               
                    通常   
                    热销
               
           
           
               
                    秒杀状態态：
               
               
                    正常   
                    秒杀
               
               
                 
               至
                --%>
           
           
               
                    产品照片：
               
               
                   

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

               
           
           
               
                    描 説明：
               
               
                                            runat="サーバー">
               
           
        テーブル>
       

   

   

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

以上が本書のすべての内容です。