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