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
121 $("#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)//如果该商品是秒杀状态 则：
130 {
131 $("#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>')
132 //初始化easyui日期控件
133 $('#SeckillDateBegin').datetimebox({
134 required: true,
135 showSeconds: false
136 });
137 $('#SeckillDateEnd').datetimebox({
138 required: true,
139 showSeconds: false
140 });
141 }
142 $('#form1').form('load', row);
143 $("#Flag ").val(row["Flag"]); //设置状态值
144 }
}
//保存数据
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('消息提示', '未设置标题图片！');
}
}
//点击单选按钮 正常时激发
210 function DisDate() {
211 $("#tdLeft").remove(); //删除秒杀时间td
212 $("#tdSeckill").remove(); //删除秒杀时间td
213 }
214 //点击单选按钮 秒杀时激发
215 function HideDate() {
216 $("#tdLeft").remove(); //删除秒杀时间td
217 $("#tdSeckill").remove(); //删除秒杀时间td
218 $("#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>')
219 //初始化easyui日期控件
220 $('#SeckillDateBegin').datetimebox({
221 required: true,
222 showSeconds: false
223 });
224 $('#SeckillDateEnd').datetimebox({
225 required: true,
226 showSeconds: false
227 });
}
</script> </head>
<body>
<table id="dgCaseInfo">
</table>
<div id="toolbar" style="width: 100%">
<div 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>
</div>
产品名称：<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>
</div>
<div id="dlg" class="easyui-dialog" style="width:800px; height: 400px; padding: 10px;"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">
产品信息</div>
<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;">
状 态：
</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;">
319 秒杀状态：
320 </td>
321 <td class="tab_td_left" >
322 正常<input name="IsSeckill" type="radio" value="0" onclick="DisDate()"/>   
323 秒杀<input name="IsSeckill" type="radio" value="1" onclick="HideDate()"/>
324 </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">
<div>
<asp: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>
</div>
</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>
</div>
<div 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>
</div>
</body>
jquery动态添加/删除 tr/td的更多相关文章
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ASP.NET+ashx+jQuery动态添加删除表格
aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...
- Jquery动态添加 删除 操作实现
这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- js动态给table添加/删除tr的方法
js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...
随机推荐
- 全面产品管理-从细微处认识"用户体验"
转载: 让我以一个故事开始本文,我觉得这个故事能概括大多数人听到“用户体验”这个术语时的想法. 我经常访问的一个财经网站给我发了一封电子邮件,请求我点击里面的一个链接,对一些信息进行审核.所以我就点了 ...
- 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程05：技能读表》
5.技能读表 技能读表概述: 技能读表,作为实现技能系统更为快捷的一种方式,被广泛应用到游戏开发中.技能配表,作为桥梁连接着游戏策划者和开发者在技能实现上的关系.在游戏技能开发中,开发者只需要根据策划 ...
- Hadoop学习记录（5）|集群搭建|节点动态添加删除
集群概念 计算机集群是一种计算机系统,通过一组松散继承的计算机软件或硬件连接连接起来高度紧密地协作完成计算工作. 集群系统中的单个计算机通常称为节点,通过局域网连接. 集群特点: 1.效率高,通过多态 ...
- HDOJ-ACM1020(JAVA)
题意:给字母计数,如果是字母后面没有相同的,原样输出,如果有则输出这个字母的个数和字母本身. import java.util.*; import java.io.*; public class Ma ...
- [struts2]开启struts2开发模式
<constant name="struts.devMode" value="true" />
- jdbc内容
Jdbc:java数据库连接技术 主要执行操作:连接数据库,执行sql语句,处理结果 Class.forName("com.mysql.jdbc.Driver"); 执行jdbc驱 ...
- (一)Memcached初学教程之安装服务篇（Windows下）
1.下载Memcached的Windows服务安装程序(备注:memcached官网:http://memcached.org/ ,没有提供windows下的安装包,只有UNIX下的安装包,我们这里用 ...
- Xcode6为什么干掉pch（Precompile Prefix Header）&如何添加pch文件
转载: http://blog.csdn.net/iosdevtip/article/details/40918353 一直在用xcode6开发,但项目都是在xcode5上创建的,所以一直没注意到, ...
- [React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- Linux内核分析：页回收导致的cpu load瞬间飙高的问题分析与思考--------------蘑菇街技术博客
http://mogu.io/156-156 摘要 本文一是为了讨论在Linux系统出现问题时我们能够借助哪些工具去协助分析,二是讨论出现问题时大致的可能点以及思路,三是希望能给应用层开发团队介绍一些 ...