mojianpo
- 浏览: 734394 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
梦行Monxin商城系统：
java网上商城与php网上商城比较 -
梦行Monxin商城系统：
java网上商城与php网上商城比较 -
任楚娴：
你好，请问html = nvl(html); 这句中的nvl（ ...
java html串转换成文本串 -
u013246812：
，谢拉！
jQuery ui Dialog 讲解参数 -
大宝剑99：
...
前端优化
<html>
<head>
<title>JS内嵌表格</title>
<script type="text/javascript">
var gseq=1;
var gLastDetailImgObj=null;
//显示详细信息
function showDetailNumTable(){
var innerTR = "<table border=\"1\" align='center' width='100%'><tr style=\"background:gray;\"><td>inner11</td><td>inner12</td><td>inner13</td><td>inner14</td><td>inner15</td></tr><tr><td>inner21</td><td>inner22</td><td>inner23</td><td>inner24</td><td>inner25</td></tr><tr><td>inner31</td><td>inner32</td><td>inner33</td><td>inner34</td><td>inner35</td></tr><tr><td>inner41</td><td>inner42</td><td>inner43</td><td>inner44</td><td>inner45</td></tr></table>";
var imgObj=event.srcElement;
var tr=getOuterObj(imgObj,'TR'); // 得到tr对象
var newDivId=null;
if(!tr.newDivId){
var newTr=document.createElement("<TR></TR>"); // 创建tr
var newTd=document.createElement("td"); // 创建td
newTd.colspan=tr.children.length;
newDivId='detaildiv'+(gseq++); // 每一行内嵌的divID，每一行的ID都不同
var newDiv=document.createElement("<div id='"+newDivId+"'></div>"); // 创建div
newTr.appendChild(newTd); // tr中添加td
newTd.appendChild(document.createTextNode("各地区情况对比如下: "));
newDiv.innerHTML = innerTR; // 必须通过innerHTML方式添加内容，通过字符串拼进去的现实不出内容
newTd.appendChild(newDiv); // td中添加div
tr.parentNode.insertBefore(newTr,tr.nextSibling); // 必须通过tr的父节点才能用insertBefore,表示插入某个元素，这里表示在tr下个元素的前面（tr的后面）插入一行
tr.newDivId=newDivId; // 把新生成的div的ID赋给DIV
newTr.cells[0].colSpan= tr.children.length;
}
switchVisible(imgObj); // 控制展开还是合上内嵌表格
if(gLastDetailImgObj!=imgObj){
switchVisible(gLastDetailImgObj);
gLastDetailImgObj=imgObj;
}
else{
gLastDetailImgObj=null;
}
}
function switchVisible(imgObj){
if(!imgObj) return; // 如果imgObj对象为空，则返回
var tr=getOuterObj(imgObj,'TR');
var pvisible=('true'!=tr.currentVisibility);
tr.currentVisibility=(pvisible?'true':'false'); // pvisible为真时，tr.currentVisibility为true;pvisible为假时，tr.currentVisibility为false;
tr.nextSibling.style.display=(pvisible? '':'none'); // pvisible为真时，tr.nextSibling.style.display为'';pvisible为假时，tr.nextSibling.style.display为none;
}
//取得对象外围符合指定标签的第一个对象
function getOuterObj(obj,tagName){
while(obj!=null){
if(obj.tagName==tagName)
return obj;
obj=obj.parentNode;
}
return null;
}
</script>
</head>
<body>
<table border="1" align="center" width="80%">
<thead>
<tr style="background:GRAY;">
<th>姓名</th><th>年龄</th><th>电话</th><th>性别</th><th>住址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td id = "no1"><a href="#" onclick="showDetailNumTable('no1');">11111111</a></td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>2</td><td id = "no2"><a href="#" onclick="showDetailNumTable('no2');">22222222</a></td><td>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td id = "no3"><a href="#" onclick="showDetailNumTable('no3');">33333333</a></td><td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td id = "no4"><a href="#" onclick="showDetailNumTable('no4');">44444444</a></td><td>4</td><td>4</td><td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
<head>
<title>JS内嵌表格</title>
<script type="text/javascript">
var gseq=1;
var gLastDetailImgObj=null;
//显示详细信息
function showDetailNumTable(){
var innerTR = "<table border=\"1\" align='center' width='100%'><tr style=\"background:gray;\"><td>inner11</td><td>inner12</td><td>inner13</td><td>inner14</td><td>inner15</td></tr><tr><td>inner21</td><td>inner22</td><td>inner23</td><td>inner24</td><td>inner25</td></tr><tr><td>inner31</td><td>inner32</td><td>inner33</td><td>inner34</td><td>inner35</td></tr><tr><td>inner41</td><td>inner42</td><td>inner43</td><td>inner44</td><td>inner45</td></tr></table>";
var imgObj=event.srcElement;
var tr=getOuterObj(imgObj,'TR'); // 得到tr对象
var newDivId=null;
if(!tr.newDivId){
var newTr=document.createElement("<TR></TR>"); // 创建tr
var newTd=document.createElement("td"); // 创建td
newTd.colspan=tr.children.length;
newDivId='detaildiv'+(gseq++); // 每一行内嵌的divID，每一行的ID都不同
var newDiv=document.createElement("<div id='"+newDivId+"'></div>"); // 创建div
newTr.appendChild(newTd); // tr中添加td
newTd.appendChild(document.createTextNode("各地区情况对比如下: "));
newDiv.innerHTML = innerTR; // 必须通过innerHTML方式添加内容，通过字符串拼进去的现实不出内容
newTd.appendChild(newDiv); // td中添加div
tr.parentNode.insertBefore(newTr,tr.nextSibling); // 必须通过tr的父节点才能用insertBefore,表示插入某个元素，这里表示在tr下个元素的前面（tr的后面）插入一行
tr.newDivId=newDivId; // 把新生成的div的ID赋给DIV
newTr.cells[0].colSpan= tr.children.length;
}
switchVisible(imgObj); // 控制展开还是合上内嵌表格
if(gLastDetailImgObj!=imgObj){
switchVisible(gLastDetailImgObj);
gLastDetailImgObj=imgObj;
}
else{
gLastDetailImgObj=null;
}
}
function switchVisible(imgObj){
if(!imgObj) return; // 如果imgObj对象为空，则返回
var tr=getOuterObj(imgObj,'TR');
var pvisible=('true'!=tr.currentVisibility);
tr.currentVisibility=(pvisible?'true':'false'); // pvisible为真时，tr.currentVisibility为true;pvisible为假时，tr.currentVisibility为false;
tr.nextSibling.style.display=(pvisible? '':'none'); // pvisible为真时，tr.nextSibling.style.display为'';pvisible为假时，tr.nextSibling.style.display为none;
}
//取得对象外围符合指定标签的第一个对象
function getOuterObj(obj,tagName){
while(obj!=null){
if(obj.tagName==tagName)
return obj;
obj=obj.parentNode;
}
return null;
}
</script>
</head>
<body>
<table border="1" align="center" width="80%">
<thead>
<tr style="background:GRAY;">
<th>姓名</th><th>年龄</th><th>电话</th><th>性别</th><th>住址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td id = "no1"><a href="#" onclick="showDetailNumTable('no1');">11111111</a></td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>2</td><td id = "no2"><a href="#" onclick="showDetailNumTable('no2');">22222222</a></td><td>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td id = "no3"><a href="#" onclick="showDetailNumTable('no3');">33333333</a></td><td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td id = "no4"><a href="#" onclick="showDetailNumTable('no4');">44444444</a></td><td>4</td><td>4</td><td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
发表评论
-
全国最新行政区划代码（Tree）json数据以及地理数据
2020-11-11 21:23 341基于阿里提供的地理数据 http://datav.aliyun ... -
小知识点--解锁 AppChecker ping ip
2019-06-19 08:40 399在使用AppChecker 进行主动拨测的时候，目 ... -
记录年会小系统
2018-02-04 14:42 1122有点意思，年会过后，抽奖活动saas小系统扒光看看：支持P ... -
jdbc方式以 sys账号连接oracle数据的问题
2017-08-22 10:44 452多年以后,在操作oracle 时 发现 jdbc 连 ... -
proguard 代码混淆
2016-11-22 10:59 667url：http://proguard.sourceforg ... -
solr 表达式意义
2015-02-03 19:29 7451. “:”指定字段查指定值，如返回所有值*:* 2. “? ... -
solr 安装配置
2015-02-03 13:15 720solr 安装配置步骤： 1 首先下载solr(最新 ... -
javax.net.ssl.SSLKeyException: RSA premaster secre临时解决方案
2014-11-25 19:38 4369javax.net.ssl.SSLKeyException ... -
compass 小知识点
2014-09-15 10:22 906今天发现排序不管事， 查了一下：索引的问题：排序的列不进 ... -
java_opts 常用
2014-08-14 13:16 1167JVM设置，可以查考如下配置example：# Memory ... -
RPC Socket 服务调用模型
2014-04-09 16:14 576最近在看Dubbo 服务框架， 通过RPC 实现了输入和 ... -
JVM 基本参数
2014-04-03 11:49 761基本的JVM参数:-classpath, -cp: 设置类搜 ... -
eclipse 快捷键失效解决方法
2014-01-17 17:20 696有时候eclispe快捷键失效了，编码起来太难受了。 ... -
Compass+ lucene 通用代码(脱离数据库)
2013-11-08 15:09 867最近需要通过检索分类的方式进行处理，所以就写了接口与实 ... -
DEBUG远程tomcat
2013-08-21 13:35 972一、在windows系统中：打开%CATALINE_H ... -
自动获取网页内容，然后写入excel文档中
2013-07-05 15:22 3418今天需要将北京物业公司名称以及电话给整理出来，发现爱帮 ... -
继续学习jersey+spring 构建RESTful风格 webservice
2013-03-13 10:36 3421j先说一下springmvc rest风格 spring ... -
尽量少使用jaxb 进行xml与对象互换
2013-03-09 17:33 1305尽量少使用jaxb 进行xml与对象互换 问题不少，这个好 ... -
Cookie path的设置
2013-02-21 10:58 1915cookie path 设置 IE对如下的co ... -
http 相关知识点
2012-10-11 10:49 1024Host头域 Host头域指定请求资源的Intenet主机和 ...
相关推荐
在vue中实现二级下拉表格的table组件
table的表头固定，用的是一个TABLE
通常自带的下拉框只能显示单一信息，而本组件可以以多列表格为下拉面板的方式呈现多列信息
引用在table.js后面，把原来的下拉选择每页数量变为输入框输入
ios应用源码之支持下拉动态加载的table view .
bootstrap-select插件，jquery实现的下拉选择。
bootstrap-table插件：bootstrap-editable,可编辑下拉框，以及代码实例,
使用javascript实现table动态增加删除行列。
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
下拉层菜单及多级tab切换效果标签,全部为js和css实现,相信总有一款样式适合您!
2015 iOS TableView上拉加载下拉刷新，适合新手，代码通俗易懂，注释清晰。
主要介绍了bootstrap table 表格中增加下拉菜单末行出现滚动条的解决方法,需要的朋友可以参考下
自己封装的继承自C# Winform中ComboBox的下拉多选控件，操作简单，效果非常好。①，可设置允许单选或多选。②，可绑定List，DataTable，Dictionary,string>类型的数据源。③，在下拉列表中可显示自定义的多列数据。...
table表格
支持下拉动态加载的table view.zipIOS应用例子源码下载支持下拉动态加载的table view.zipIOS应用例子源码下载 1.适合学生学习研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
下拉框的内容通过js的insertRow插入到table中,通过delRow删除table中的行
在别人的基础上修改的，在一个class里面支持表头下拉刷新，表尾上拉刷新。
IOS应用源码之支持下拉动态加载的table view .rar
IOS应用源码之支持下拉动态加载的table view.zip
IOS应用源码——支持下拉动态加载的table view.zip