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')">取消 以上就是本文的全部内容了，希望大家能够喜欢。

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

jquery dynamically add and delete (tr/td)_javascript skills


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