本文展示了一个使用jQuery EasyUI库实现的表格编辑示例，包括如何通过点击展开和折叠表格详细信息，以及如何设置表格样式。示例中还包含了新增、删除等操作按钮。
最终效果如下图所示：
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="styles/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="styles/themes/icon.css">
<link rel="stylesheet" type="text/css" href="styles/niceforms.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/niceforms-default.js"></script>
<script>
$(function() {
bindToggle();
});
// 点击栏目展开或折叠
function bindToggle() {
$(".checkboxedittable").toggle(
function(){
$(this).next().hide();
$(this).find("td").addClass("bottom_td");
},
function(){
$(this).next().fadeIn();
$(this).find("td").removeClass("bottom_td");
}
);
}
</script>
<style>
.table_area {
padding: 5px;
}
.table_area td {
padding: 5px;
}
.table_area th {
background:#00af50;
margin-top:5px;
margin-bottom:10px;
font: bold;
color:#FFF;
font-size: 14px;
border-right:2 solid #FFF;
}
.top_td {
border-top: 2px solid #3d9c7e;
}
.right_td {
border-right: 2px solid #3d9c7e;
}
.bottom_td {
border-bottom: 2px solid #3d9c7e;
}
.left_td {
border-left: 2px solid #3d9c7e;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form class="niceform" >
<div>
<div>
<div class="ShortcutMenuTitleDiv">
<div class="ShortcutInsureTitleIconDiv">快捷投保</div>
</div>
<div class="anniudiv" align="right">
<a id="searchBtn" href="javascript: void(0)" class="easyui-linkbutton" >新增</a>
<a id="searchBtn" href="javascript: void(0)" class="easyui-linkbutton" >删除</a>
</div>
<br />
<table class="table_area" align="center" width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th class=""> </th>
<th class="" align="center">方案名称</th>
<th class="" align="center">出单员</th>
<th class="" align="center">备注</th>
<th class="" align="center">配置时间</th>
<th class="" align="center">操作</th>
</tr>
<tr>
<td style="height: 5px;" colspan="6"></td>
</tr>
<tr class="checkboxedittable">
<td class="top_td left_td"> </td>
<td class="top_td" align="center">北方第五代理点信息</td>
<td class="top_td" align="center">张磊</td>
<td class="top_td" align="center">第五代理店信息关联+异议处理方式</td>
<td class="top_td" align="center">2013/05/02</td>
<td class="top_td right_td" align="center">编辑</td>
</tr>
<tr>
<td class="left_td bottom_td right_td" colspan="6">
<div class="editdiv">
<table width="100%">
<tr>
<td colspan="6"> 销售信息</td>
</tr>
<tr>
<td colspan="6">
<table width="100%" style="background:#eee;">
<tr >
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="6"> 其他信息</td>
</tr>
<tr>
<td colspan="6">
<table width="100%" style="background:#eee;">
<tr >
<td class="t">车辆归属地：</td>
<td class="t"></td>
<td class="t">所属税务机构：</td>
<td class="t"></td>
<td class="t">车牌号前缀：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">验车情况：</td>
<td class="t">已验车</td>
<td class="t">验车人：</td>
<td class="t"></td>
<td class="t">争议解决方式：</td>
<td class="t">诉讼</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="height: 5px;" colspan="6"></td>
</tr>
<tr class="checkboxedittable">
<td class="top_td left_td"> </td>
<td class="top_td" align="center">北方第五代理点信息</td>
<td class="top_td" align="center">张磊</td>
<td class="top_td" align="center">第五代理店信息关联+异议处理方式</td>
<td class="top_td" align="center">2013/05/02</td>
<td class="top_td right_td" align="center">编辑</td>
</tr>
<tr>
<td class="left_td bottom_td right_td" colspan="6">
<div class="editdiv">
<table width="100%">
<tr>
<td colspan="6"> 销售信息</td>
</tr>
<tr>
<td colspan="6">
<table width="100%" style="background:#eee;">
<tr >
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="6"> 其他信息</td>
</tr>
<tr>
<td colspan="6">
<table width="100%" style="background:#eee;">
<tr >
<td class="t">车辆归属地：</td>
<td class="t"></td>
<td class="t">所属税务机构：</td>
<td class="t"></td>
<td class="t">车牌号前缀：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">验车情况：</td>
<td class="t">已验车</td>
<td class="t">验车人：</td>
<td class="t"></td>
<td class="t">争议解决方式：</td>
<td class="t">诉讼</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
扫一扫
3460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
