jquery dynamically add and delete (tr/td)_javascript skills-JS Tutorial-php.cn

The code is very simple, and the functions implemented are also very simple. Friends who need it can refer to it.

Copy code The code is as follows: /* 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: 'Loading...', url: '../ashx/GetSm_CaseInformation.ashx?types=loadListPage', //Page to request data sortName: 'ID', //Sort field idField: 'ID', //Identification field, primary key iconCls: '', //The picture on the left of the title singleSelect: true, width: '100%', //Width height : 'auto', //Height nowrap: true, // Whether to wrap the line, True will display the data in one line Striped: true, //True uses different background colors for odd and even rows collapsible: false, //Collapsible sortOrder: 'desc', //Sort type remoteSort: true, //Define whether to sort data from the server fit: true, singleSelect: true, //Whether only one row is allowed to be selected selectOnCheck: false, //Clicking the checkbox will not select the row fitColumns: true, //Columns automatically scale columns: [[ { field: 'Name', title: 'Product Name', width: 200, align: 'left' }, { field: 'Add_Time', title: 'Add Time', width: 100, align: 'left' }, { field: 'Describe', title: 'Describe', width: 100, align: 'left', hidden: true }, { field: 'FilePath', title: 'Case Photo', width: 100, align: 'left', Formatter: function (value, row, index) { If (row.FilePath != "") { return ' ' } Return "No picture" } } }, { field: 'Flag', title: 'Status', width: 100, align: 'left', Formatter: function (value, row, index) { If (row.Flag == 0) { Return "on the shelves"; } Return "removed"; } } }, { field: 'TypeID', title: 'Product type', width: 100, align: 'left', hidden: true }, { field: 'MonadID', title: 'Company name', width: 100, align: 'left', hidden: true }, { field: 'MonadName', title: 'Company name', width: 100, align: 'left', hidden: true } ]], toolbar: "#toolbar", queryParams: { "action": "query" }, pagination: true, //Whether to enable paging pagePosition: 'bottom', //Page position pageNumber: 1, //Default index page pageSize: 10, //Default number of data items on a page onDblClickRow: function (rowIndex, rowData) {//Row double-click event Edit(); } }) } var url; //Add a piece of data function Add() { $("#tdLeft").remove();//Delete flash sale time td $("#tdSeckill").remove(); //Delete the flash sale time 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'); } //Edit and modify function Edit() { $("#tdLeft").remove(); //Delete flash sale time td $("#tdSeckill").remove(); //Delete the flash sale time td loadTypeID(); url = '../ashx/GetSm_CaseInformation.ashx?types=ListEdit'; var row = $('#dgCaseInfo').datagrid('getSelected'); if (row) { $('#dlg').dialog('open').dialog('setTitle', 'Modify'); $("#imageCaseUrl").attr("src", "../.." $('#FilePath').val()); //Set the url of editor.html(row["Describe"]); If (row["IsSeckill"]==1)//If the product is in flash sale status: { $("#trSeckill").append(' Seckill time: to ') //Initialize easyui date control $('#SeckillDateBegin').datetimebox({ required: true, showSeconds: false }); $('#SeckillDateEnd').datetimebox({ required: true, showSeconds: false }); } $('#form1').form('load', row); $("#Flag ").val(row["Flag"]); //Set status value } } //Save data function Save() { editor.sync(); $('#form1').form('submit', { url: url, onSubmit: function () { return $(this).form('validate'); }, success: function (result) { if (result $.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 } }); } } //Load product type function loadTypeID() { $('#TypeID').combobox({ url: '../ashx/GetSm_CaseInformation.ashx?types=TypeIDLoad', valueField: 'ID', textField: 'DtyName' }); } // After clicking the picture, excite function ShowBigview(rowIndex) { var row = $("#dgCaseInfo").datagrid('getRows')[rowIndex]; If (row["FilePath"].toString() != "") { $.messager.alert('Large image preview', ' ') ; } else { $ .Messager.alert ('Message prompt', 'The title picture is not set!'); } } //Click the radio button to fire normally function DisDate() { $("#tdLeft").remove(); //Delete flash sale time td $("#tdSeckill").remove(); //Delete the flash sale time td } //Click the radio button to trigger the flash sale function HideDate() { $("#tdLeft").remove(); //Delete flash sale time td $("#tdSeckill").remove(); //Delete the flash sale time 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"> 商品名称： 商品类型： 商品价格： 商品折扣： 库存数量： 卖出件数： 状 态： 上架 &nbsp&nbsp&nbsp 下架 是否热销： 正常 &nbsp&nbsp&nbsp 热销 秒杀状态： 正常 &nbsp&nbsp&nbsp 秒杀 至 --%> 产品照片： MaxLength="255"> 正在上传，请稍候... 描 述： runat="server"> 保存 onclick="javascript:$('#dlg').dialog('close')">取消 以上就是本文的全部内容了，希望大家能够喜欢。


商品名称：		商品类型：
商品价格：		商品折扣：
库存数量：		卖出件数：
状态：	上架下架	是否热销：	正常热销
秒杀状态：	正常秒杀	至
产品照片：	MaxLength="255"> 正在上传，请稍候...
描述：	runat="server">