jquery动态添加删除(tr/td)
代码很简单,实现的功能也很简单,有需要的小伙伴参考下吧。
<headrunat="server"> <title></title> <!--easyui--> <linkrel="stylesheet"type="text/css"href="../../script/jquery-easyui-1.3.2/themes/icon.css"/> <linkrel="stylesheet"type="text/css"href="../../script/easy_ui/themes/demo.css"/> <linkrel="stylesheet"type="text/css"href="../../script/jquery-easyui-1.3.2/themes/default/easyui.css"/> <linkhref="../../css/function.css"rel="stylesheet"type="text/css"/> <scripttype="text/javascript"src="../../script/jquery-1.8.2.js"></script> <scripttype="text/javascript"src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_TW.js"></script> <scripttype="text/javascript"src="../../script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <scripttype="text/javascript"src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script> <!--上传控件--> <linkhref="../../css/images/style.css"rel="stylesheet"type="text/css"/> <scripttype='text/javascript'src="../../script/swfupload/swfupload.js"></script> <scripttype='text/javascript'src="../../script/swfupload/swfupload.queue.js"></script> <scripttype="text/javascript"src="../../script/swfupload/swfupload.handlers.js"></script> <scriptsrc="../../script/jquery.form.min.js"type="text/javascript"></script> <scripttype="text/javascript"src="../../script/function.js"></script> <!--编辑器--> <scripttype="text/javascript"charset="utf-8"src="../../editor/kindeditor-min.js"></script> <scripttype="text/javascript"charset="utf-8"src="../../editor/lang/zh_CN.js"></script> <scripttype="text/javascript"> /*jqueryeasyui操作*/ window.onload=function(){ InitGird(); } //加载编辑器 vareditor; $(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","1024KB","../../script/swfupload/swfupload.swf",1,1); }); //搜索 functionSearch(){ $('#dgCaseInfo').datagrid('load',{ action:"loadListPage", Names:$("#Names").val() }); } //初始化表格 functionInitGird(){ $("#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'<ahref=javascript:ShowBigview('+index+')><imgalt="照片"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(); } }) } varurl; //添加一条数据 functionAdd(){ $("#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'); } //编辑修改 functionEdit(){ $("#tdLeft").remove();//删除秒杀时间td $("#tdSeckill").remove();//删除秒杀时间td loadTypeID(); url='../ashx/GetSm_CaseInformation.ashx?types=ListEdit'; varrow=$('#dgCaseInfo').datagrid('getSelected'); if(row){ $('#dlg').dialog('open').dialog('setTitle','修改'); $("#imageCaseUrl").attr("src","../.."+$('#FilePath').val());//设置<imageid="imageCaseUrl">的url editor.html(row["Describe"]); if(row["IsSeckill"]==1)//如果该商品是秒杀状态则: { $("#trSeckill").append('<tdid="tdLeft"class="tab_td_right"style="width:80px;">秒杀时间:</td><tdid="tdSeckill"class="tab_td_left"><inputid="SeckillDateBegin" class="easyui-datetimebox"name="SeckillDateBegin"style="width:150px">至<inputid="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"]);//设置状态值 } } //保存数据 functionSave(){ 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'); //closethedialog $('#dgCaseInfo').datagrid('reload'); //reloadtheuserdata } } }); } //删除一条数据 functiondestroy(){ varrow=$('#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'); //reloadtheuserdata }else{ $.messager.show( { //showerrormessage title:'Error', msg:result.errorMsg } ); } },'json'); } }); } } //加载商品类型 functionloadTypeID(){ $('#TypeID').combobox({ url:'../ashx/GetSm_CaseInformation.ashx?types=TypeIDLoad', valueField:'ID', textField:'DtyName' }); } //点击图片后激发 functionShowBigview(rowIndex){ varrow=$("#dgCaseInfo").datagrid('getRows')[rowIndex]; if(row["FilePath"].toString()!=""){ $.messager.alert('大图预览','<imgalt="" src=../..'+row["FilePath"]+'width="100px"height="100px"/>'); }else{ $.messager.alert('消息提示','未设置标题图片!'); } } //点击单选按钮正常时激发 functionDisDate(){ $("#tdLeft").remove();//删除秒杀时间td $("#tdSeckill").remove();//删除秒杀时间td } //点击单选按钮秒杀时激发 functionHideDate(){ $("#tdLeft").remove();//删除秒杀时间td $("#tdSeckill").remove();//删除秒杀时间td $("#trSeckill").append('<tdid="tdLeft"class="tab_td_right"style="width:80px;">秒杀时间:</td><tdid="tdSeckill"class="tab_td_left"><inputid="SeckillDateBegin" class="easyui-datetimebox"name="SeckillDateBegin"style="width:150px">至<inputid="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> <tableid="dgCaseInfo"> </table> <divid="toolbar"style="width:100%"> <divstyle="padding-top:5px;width:100%"> <ahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-add"plain="true" onclick="Add()">添加</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="Edit()">编辑</a><ahref="javascript:void(0)"class="easyui-linkbutton" iconcls="icon-remove"plain="true"onclick="destroy()">删除</a> </div> 产品名称:<inputid="Names"name="Names"class="easyui-validatebox"type="text"/> <aid="search"href="#"onclick="Search()"class="easyui-linkbutton"plain="true" data-options="iconCls:'icon-search'">搜索</a> </div> <divid="dlg"class="easyui-dialog"style="width:800px;height:400px;padding:10px;" closed="true"buttons="#dlg-buttons"> <divclass="ftitle"> 产品信息</div> <formid="form1"runat="server"method="post"> <tableid="table_edit"class="tab"style="width:98%;font-size:12px;border:1px#E1E1E1solid"cellpadding="0" cellspacing="1"> <trclass="tab_tr"style="display:none;"> <tdcolspan="4"> <inputname="ID"class="easyui-validatebox"/> <inputname="MonadID"class="easyui-validatebox"/> </td> </tr> <trstyle="height:26px;"class="tab_tr"> <tdclass="tab_td_right"style="width:80px;"> 商品名称: </td> <tdclass="tab_td_left"> <inputname="Name"class="easyui-validatebox"required="true"style="width:150px"/> </td> <tdclass="tab_td_right"style="width:80px;"> 商品类型: </td> <tdclass="tab_td_left"> <inputid="TypeID"name="TypeID"style="width:200px"required="true"/> </td> </tr> <trstyle="height:26px;" class="tab_tr"> <tdclass="tab_td_right"style="width:80px;"> 商品价格: </td> <tdclass="tab_td_left"> <inputname="Price"class="easyui-validatebox"required="true"style="width:150px"/> </td> <tdclass="tab_td_right"style="width:80px;"> 商品折扣: </td> <tdclass="tab_td_left"> <inputid="Discount"name="Discount"style="width:200px"/> </td> </tr> <trstyle="height:26px;" class="tab_tr"> <tdclass="tab_td_right"style="width:80px;"> 库存数量: </td> <tdclass="tab_td_left"> <inputid="InventoryNumber"name="InventoryNumber"style="width:150px"/> </td> <tdclass="tab_td_right"style="width:80px;"> 卖出件数: </td> <tdclass="tab_td_left"> <inputid="SellNumber"name="SellNumber"style="width:200px"/> </td> </tr> <trstyle="height:26px;" class="tab_tr"> <tdclass="tab_td_right"style="width:80px;"> 状 态: </td> <tdclass="tab_td_left"> 上架<inputname="Flag"type="radio"value="0"/>    下架<inputname="Flag"type="radio"value="1"/> </td> <tdclass="tab_td_right"style="width:80px;"> 是否热销: </td> <tdclass="tab_td_left"> 正常<inputname="IsHotSell"type="radio"value="0"/>    热销<inputname="IsHotSell"type="radio"value="1"/> </td> </tr> <trstyle="height:26px;" class="tab_tr"id="trSeckill"> <tdclass="tab_td_right"style="width:80px;"> 秒杀状态: </td> <tdclass="tab_td_left"> 正常<inputname="IsSeckill"type="radio"value="0" onclick="DisDate()"/>    秒杀<inputname="IsSeckill"type="radio"value="1" onclick="HideDate()"/> </td> <%--<tdclass="tab_td_left"> <inputid="SeckillDateBegin"disabled="disabled"class="easyui-datetimebox"name="SeckillDateBegin"data-options="required:true,showSeconds:false" style="width:150px"> 至<inputid="SeckillDateEnd"disabled="disabled"class="easyui-datetimebox"name="SeckillDateEnd"data-options="required:true,showSeconds:false" style="width:150px"> </td>--%> </tr> <trstyle="height:26px;" class="tab_tr"> <tdclass="tab_td_right"style="width:80px;"> 产品照片: </td> <tdclass="tab_td_left"colspan="3"> <div> <asp:TextBoxID="FilePath"name="FilePath"runat="server"CssClass="txtInputnormalleft" MaxLength="255"></asp:TextBox> <ahref="javascript:;"class="files"> <inputtype="file"id="FileUpload"name="FileUpload"onchange="Upload('SingleFile','FilePath','FileUpload');"/></a> <spanclass="uploading">正在上传,请稍候...</span> </div> </td> </tr> <trstyle="height:26px;" class="tab_tr"> <tdclass="tab_td_right"style="width:80px;"> 描 述: </td> <tdclass="tab_td_left"colspan="3"> <textareaid="Describe"name="Describe"style="width:99%;height:100px;visibility:hidden;" runat="server"></textarea> </td> </tr> </table> </form> </div> <divid="dlg-buttons"> <ahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-ok"onclick="Save()"> 保存</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a> </div> </body>
以上就是本文的全部内容了,希望大家能够喜欢。