jquery动态添加删除(tr/td)
jquery动态添加删除(tr/td)代码如下:
<head runat="server">
<title></title>
<!--easyui -->
<link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../../script/easy_ui/themes/demo.css" />
<link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/default/easyui.css" />
<link href="../../css/function.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../script/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_tw.js"></script>
<script type="text/javascript" src="../../script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_cn.js"></script>
<!--上传控件 -->
<link href="../../css/images/style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="../../script/swfupload/swfupload.js"></script>
<script type='text/javascript' src="../../script/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="../../script/swfupload/swfupload.handlers.js"></script>
<script src="../../script/jquery.form.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/function.js"></script>
<!--编辑器 -->
<script type="text/javascript" charset="utf-8" src="../../editor/kindeditor-min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../editor/lang/zh_cn.js"></script>
<script type="text/javascript">
/* 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: '正在努力加载中...',
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 '<a href=javascript：showbigview(' + index + ')><img alt="照片" 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();
}
})
}
var url;
//添加一条数据
function add() {
$("#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');
}
//编辑修改
function edit() {
$("#tdleft").remove(); //删除秒杀时间td
$("#tdseckill").remove(); //删除秒杀时间td
loadtypeid();
url = '../ashx/getsm_caseinformation.ashx?types=listedit';
var row = $('#dgcaseinfo').datagrid('getselected');
if (row) {
$('#dlg').dialog('open').dialog('settitle', '修改');
$("#imagecaseurl").attr("src", "../.." + $('#filepath').val()); //设置<image id="imagecaseurl">的url
editor.html(row["describe"]);
if (row["isseckill"]==1)//如果该商品是秒杀状态 则：
{
$("#trseckill").append(' <td id="tdleft" class="tab_td_right" style="width:80px;">秒杀时间：</td><td id="tdseckill" class="tab_td_left"><input id="seckilldatebegin" class="easyui-datetimebox" name="seckilldatebegin" style="width:150px"> 至<input id="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"]); //设置状态值
}
}
//保存数据
function save() {
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'); // 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
title: 'error',
msg: result.errormsg
}
);
}
}, 'json');
}
});
}
}
//加载商品类型
function 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('大图预览', '<img alt="" src=../..' + row["filepath"] + ' width="100px" height="100px" />');
} else {
$.messager.alert('消息提示', '未设置标题图片！');
}
}
//点击单选按钮 正常时激发
function disdate() {
$("#tdleft").remove(); //删除秒杀时间td
$("#tdseckill").remove(); //删除秒杀时间td
}
//点击单选按钮 秒杀时激发
function hidedate() {
$("#tdleft").remove(); //删除秒杀时间td
$("#tdseckill").remove(); //删除秒杀时间td
$("#trseckill").append(' <td id="tdleft" class="tab_td_right" style="width:80px;">秒杀时间：</td><td id="tdseckill" class="tab_td_left"><input id="seckilldatebegin" class="easyui-datetimebox" name="seckilldatebegin" style="width:150px"> 至<input id="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>
<table id="dgcaseinfo">
</table>
<p id="toolbar" style="width: 100%">
<p style="padding-top: 5px; width: 100%">
<a href="javascript：void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"
onclick="add()">添加</a> <a href="javascript：void(0)" class="easyui-linkbutton" iconcls="icon-edit"
plain="true" onclick="edit()">编辑</a> <a href="javascript：void(0)" class="easyui-linkbutton"
iconcls="icon-remove" plain="true" onclick="destroy()">删除</a>
</p>
产品名称：<input id="names" name="names" class="easyui-validatebox" type="text" />
<a id="search" href="#" onclick="search()" class="easyui-linkbutton" plain="true"
data-options="iconcls:'icon-search'">搜索</a>
</p>
<p id="dlg" class="easyui-dialog" style="width:800px; height: 400px; padding: 10px;"
closed="true" buttons="#dlg-buttons">
<p class="ftitle">
产品信息</p>
<form id="form1" runat="server" method="post">
<table id="table_edit" class="tab" style="width: 98%; font-size: 12px; border: 1px #e1e1e1 solid" cellpadding="0"
cellspacing="1">
<tr class="tab_tr" style="display: none;">
<td colspan="4">
<input name="id" class="easyui-validatebox" />
<input name="monadid" class="easyui-validatebox" />
</td>
</tr>
<tr style="height: 26px;" class="tab_tr">
<td class="tab_td_right" style="width:80px;">
商品名称：
</td>
<td class="tab_td_left">
<input name="name" class="easyui-validatebox" required="true" style="width:150px" />
</td>
<td class="tab_td_right" style="width:80px;">
商品类型：
</td>
<td class="tab_td_left">
<input id="typeid" name="typeid" style="width: 200px" required="true" />
</td>
</tr>
<tr style="height: 26px; " class="tab_tr">
<td class="tab_td_right" style="width:80px;">
商品价格：
</td>
<td class="tab_td_left">
<input name="price" class="easyui-validatebox" required="true" style="width: 150px" />
</td>
<td class="tab_td_right" style="width:80px;">
商品折扣：
</td>
<td class="tab_td_left">
<input id="discount" name="discount" style="width: 200px" />
</td>
</tr>
<tr style="height: 26px; " class="tab_tr">
<td class="tab_td_right" style="width:80px;">
库存数量：
</td>
<td class="tab_td_left">
<input id="inventorynumber" name="inventorynumber" style="width: 150px" />
</td>
<td class="tab_td_right" style="width:80px;">
卖出件数：
</td>
<td class="tab_td_left">
<input id="sellnumber" name="sellnumber" style="width: 200px" />
</td>
</tr>
<tr style="height: 26px; " class="tab_tr">
<td class="tab_td_right" style="width:80px;">
状 态：
nbsp; </td>
<td class="tab_td_left">
上架<input name="flag" type="radio" value="0" />
下架<input name="flag" type="radio" value="1" />
</td>
<td class="tab_td_right" style="width:80px;">
是否热销：
</td>
<td class="tab_td_left">
正常<input name="ishotsell" type="radio" value="0" />
热销<input name="ishotsell" type="radio" value="1" />
</td>
</tr>
<tr style="height: 26px; " class="tab_tr" id="trseckill">
<td class="tab_td_right" style="width:80px;">
秒杀状态：
</td>
<td class="tab_td_left" >
正常<input name="isseckill" type="radio" value="0" onclick="disdate()"/>
秒杀<input name="isseckill" type="radio" value="1" onclick="hidedate()"/>
</td>
<%-- <td class="tab_td_left" >
<input id="seckilldatebegin" disabled="disabled" class="easyui-datetimebox" name="seckilldatebegin" data-options="required:true,showseconds:false" style="width:150px">
至<input id="seckilldateend" disabled="disabled" class="easyui-datetimebox" name="seckilldateend" data-options="required:true,showseconds:false" style="width:150px">
</td>--%>
</tr>
<tr style="height: 26px; " class="tab_tr">
<td class="tab_td_right" style="width:80px;">
产品照片：
</td>
<td class="tab_td_left" colspan="3">
<p>
<:textbox id="filepath" name="filepath" runat="server" cssclass="txtinput normal left"
maxlength="255"></asp:textbox>
<a href="javascript：;" class="files">
<input type="file" id="fileupload" name="fileupload" onchange="upload('singlefile', 'filepath', 'fileupload');" /></a>
<span class="uploading">正在上传，请稍候...</span>
</p>
</td>
</tr>
<tr style="height: 26px;" class="tab_tr">
<td class="tab_td_right" style="width:80px;">
描 述：
</td>
<td class="tab_td_left" colspan="3">
<textarea id="describe" name="describe" style="width: 99%; height: 100px; visibility: hidden;"
runat="server"></textarea>
</td>
</tr>
</table>
</form>
</p>
<p id="dlg-buttons">
<a href="javascript：void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="save()">
保存</a> <a href="javascript：void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
onclick="javascript：$('#dlg').dialog('close')">取消</a>
</p>
</body>