JavaScript动态加载ul标签
2016-02-26 20:17
585 查看
网上也查了很多关于JavaScript动态加载ul标签的文章,但是感觉不是很全,自己边查边琢磨着代码,给我蒙对了。看看吧!
我想实现的功能很简单,就是查到数据库有数据,就在前台显示<ul>标签,有几条数据,显示几个标签。
那么开始了:
首先默认数据库是没有数据的,那么就默认显示无到期的任务。
![](https://img-blog.csdn.net/20160226174926696?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
有数据之后,动态加载ul标签的JavaScript代码如下
![](https://img-blog.csdn.net/20160226201613039?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
这样动态加载ul标签的效果就出来了。
我想实现的功能很简单,就是查到数据库有数据,就在前台显示<ul>标签,有几条数据,显示几个标签。
那么开始了:
首先默认数据库是没有数据的,那么就默认显示无到期的任务。
<ul class="task_main" id="ultask"> <li id="showlist1" style="display:none"> <a> <div> <h2>暂无今天内到期的任务</h2> </div> </a> </li> <li id="showlist2" style="display:none"> <a> <div> <h2>暂无5天内到期的任务</h2> </div> </a> </li> </ul>
var ul1 = document.getElementById("showlist1"); var ul2 = document.getElementById("showlist2"); var projectid=data.Data.Projects1["0"].ProjectId; if (projectid=="") { <span style="white-space:pre"> </span>if (ul1.style.display == "none") { ul2.style.display = "none"; ul1.style.display = ""; } }结果如下:
有数据之后,动态加载ul标签的JavaScript代码如下
//从数据库获取的参数 var result = data.Data.Projects1["0"]; var k = data.Data.Projects1["length"]; var ul = document.getElementById("ultask"); var stepname = result.StepName; var companyname = result.CompanyName; var projecttype = (result.ProjectType == 1) ? "项目1" : "项目2"; var enddate = result.PerformDateString; var li = document.createElement("li"); var a = document.createElement("a"); var div = document.createElement("div"); var h2 = document.createElement("h2") h2.innerHTML = stepname;//步骤名称 var span1 = document.createElement("span"); var span2 = document.createElement("span"); var span3 = document.createElement("span"); span1.innerHTML = companyname;//公司名称 span2.innerHTML = projecttype;//项目类型 span3.innerHTML = enddate;//截止日期 //根据查到的数据条数动态增加ul标签 for (var i = 1; i <= k; i++) { ul.appendChild(li); li.appendChild(a); a.appendChild(div); div.appendChild(h2); div.appendChild(span1); div.appendChild(span2); div.appendChild(span3); }
这样动态加载ul标签的效果就出来了。
相关文章推荐
- web小游戏 2048制作(四):过场动画 showanimation2048.js
- web小游戏 2048制作(三):辅助函数 support2048.js
- web小游戏 2048制作(二):游戏主逻辑 main2048.js
- 利用Gson实现简单的json字符串解析
- 使用javascript正则表达式实现遍历html字符串
- JSP页面跳转的几种实现方法
- js 获得当前日期
- 在javascript中取页面中的值
- js 推断 当页面无法回退时(history.go(-1)),关闭网页
- [javascript-code-snippet]javascript代码段
- javascript svg 页面 loading
- JavaScript跨域总结与解决办法(转)
- web端输出打印地图(ArcGIS api for Javascript)一、地图打印模板的制作
- js学习笔记1(变量、作用域、内存)
- [Ext JS 4] Grid 中的单元格添加Tooltip 的效果
- [Ext JS 4] Grid 中的单元格添加Tooltip 的效果
- win10系统下 jsoncpp mingw 编译
- JS快速获取图片宽高的方法
- js 小总结
- JS实现密码加密