`
xiuying
  • 浏览: 544989 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

动态生成DIV/UL/LI

    博客分类:
  • web
J# 
阅读更多
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.ul1{
margin:0px;
padding:0px;
height:28px;
border-left:1px solid #000000;
}
.li1{
width:12%;
height:28px;
line-height:28px;
vertical-align:middle;
text-align:center;
float:left;
list-style-type:none;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
}

.divcss{
font-size:12px;
height:auto;
width:auto;
margin:0px;
padding:0px;
}
.lititlecss
{
    width:12%;
height:28px;
line-height:28px;
text-align:center;
vertical-align:middle;
float:left;
margin:0px;
padding:0px;
list-style-type:none;
background-color:#CCCCCC;
border-right:1px #000000 solid;
border-bottom:1px #000000 solid;
border-top:1px #000000 solid;
}
.ulcss{
margin:0px;
padding:0px;
height:28px;
border-left:1px #000000 solid;

}
</style>
</HEAD>

<BODY>
<div id="divs">
<ul ID="ss" class="ulcss">
<li class="lititlecss">序号</li>
<li class="lititlecss">名字</li>
<li class="lititlecss">性别</li>
<li class="lititlecss">年龄</li>
</ul>
</div>

</BODY>
<script language="javascript">
function createDiv(){
// var divs = document.createElement("DIV");     //动态创建DIV
var divs = document.getElementById("divs");
divs.className="divcss";
for(var j=0;j<3;j++){
var uu ="ul"+j ;
uu = document.createElement("UL");
uu.className="ul1";
for(var i=0;i<4;i++){
var ll = "li" +i;
var ll = document.createElement("LI");
ll.className="li1";
ll.innerText="222"+i;
uu.appendChild(ll);
}
divs.appendChild(uu);
}
divs.id="newDiv";
document.body.appendChild(divs);
}
createDiv();
</script>
</HTML>
分享到:
评论

相关推荐

    jQuery生成SKU表格实例代码.zip

    &lt;div class="demo-title"&gt;淘宝商户端发布商品时,动态生成SKU表格的实例&lt;/div&gt; &lt;ul class="SKU_TYPE"&gt; &lt;li is_required='1' propid='1' sku-type-name="存储"&gt;*&lt;/em&gt;存储:&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;&lt;label&gt;&lt;...

    JS+HTML动态生成的树

    在JavaScript和HTML的世界里,动态生成的树结构是一种常见的数据可视化技术,用于展示层次关系的数据。这种技术在网站设计、Web应用以及各种管理界面中尤为常见,如文件系统浏览、组织架构展示、导航菜单等。本文将...

    Emmet Cheat Sheet PDF版

    例如,输入`.class`会生成一个`&lt;div class="class"&gt;&lt;/div&gt;`,而`ul&gt;.class`会生成一个`&lt;li class="class"&gt;&lt;/li&gt;`。 在实际开发中,还可以通过Emmet的扩展命令来完成更加复杂的操作。例如,可以在Emmet的缩写前加上`...

    js动态生成tab页

    动态生成tab页是常见的功能需求,它允许用户在不同的内容面板之间切换,而无需页面刷新。本教程将深入探讨如何使用JS实现动态生成tab页,并结合HTML和CSS创建一个完整的框架界面。 首先,我们需要理解基本的HTML...

    ASP.Net电子商务网站后台模板

    &lt;li id="now19"&gt;生成文件管理" href="#" target="content3"&gt;生成文件管理&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="now1a"&gt;标签管理" href="#" target="content3"&gt;标签管理&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="now1b"&gt;模板管理" onclick=...

    jquery html动态添加的元素绑定事件详解

    假设我们要给ul动态添加的&lt;li&gt;绑定click事件形成如下结果 &lt;div id=testdiv&gt; &lt;ul&gt; &lt;li name=apple&gt;apple&lt;/li&gt; &lt;li name=pear&gt;pear&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; [removed] function test(name){ alert&#40;I'm +name&#41...

    javascript实现随机生成DIV背景色

    在探讨如何使用JavaScript随机生成DIV的背景色之前,我们先来了解基本的背景色设置方法。在网页设计中,设置DIV背景色通常通过CSS来实现,属性名为`background-color`。背景色可以通过颜色的名称、RGB值、十六进制值...

    ul和li实现分两列(多列)布局显示

    这段代码会生成一个`&lt;div&gt;`容器,里面包含一个`&lt;ul&gt;`列表,列表中由六个`&lt;li&gt;`元素组成,每个`&lt;li&gt;`元素在视觉上形成一列。 以上示例是一个较为简单的两列或多列布局的实现方法,它可以用于简单的信息展示,如新闻...

    js菜单可以动态生成

    在网页设计中,菜单是用户与网站交互的重要部分,动态生成的菜单可以根据用户需求或数据变化实时更新,提供更加灵活和个性化的用户体验。本文将深入探讨如何使用JavaScript来动态生成菜单,并结合jQuery EasyUI库...

    zen coding--免费下载

    3. **动态展开**:缩写中的数字可以动态变化,如`ul&gt;li{item $}*3`会生成带有计数的列表项: ```html &lt;ul&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;li&gt;item 3&lt;/li&gt; &lt;/ul&gt; ``` 4. **CSS属性快速添加**:对于CSS,...

    div+css菜单生成器

    1. **菜单结构**:在HTML中,菜单通常由多个`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)元素组成,这些元素嵌套在一起形成层次结构。`&lt;div&gt;`元素可以作为包裹整个菜单的容器,或者用于分隔不同的菜单级别。 2. **CSS样式...

    ajax动态生成树 用于jsp

    本文将深入探讨如何使用Ajax技术在JSP(JavaServer Pages)环境中动态生成树形结构,以实现数据的实时加载和交互。 首先,我们需要理解Ajax的基本原理。Ajax的核心是XMLHttpRequest对象,它允许在不重新加载整个...

    emmet官方文档下载.zip

    例如,输入`div&gt;ul&gt;li*3`,然后按Emmet的快捷键(通常为`Tab`或`Ctrl+E`),会自动生成以下代码: ```html &lt;div&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; ``` 这里的`&gt;`表示直接子元素关系,`*3`...

    dtreeJQuery实例.动态生成树

    dtree的基本结构是使用`&lt;ul&gt;`和`&lt;li&gt;`元素构建的,每个`&lt;li&gt;`代表一个树节点,可以包含子节点或者叶子节点。dtree提供了一些API方法,如`init()`用于初始化树,`openNode(nodeId)`用于展开指定节点,`closeNode(node...

    bootstrap动态生成tab

    在本场景中,"bootstrap动态生成tab"涉及到的主要知识点包括JavaScript编程、Bootstrap框架的Tab组件以及可能的IFrame和Div元素的嵌套使用。 1. **Bootstrap Tab组件**:Bootstrap的Tab组件提供了一种简洁的方式,...

    Zon Coding for sublime text2(Zon Coding插件)

    Zon Coding/Emmet的另一个强大功能是动态扩展,例如输入`ul&gt;li*3&gt;a[href="#"]`,会生成: ```html &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; ``` 这样的动态...

    EMET快捷键

    例如,"div+p+bq"将生成div后面跟着一个p元素,再接着是一个blockquote元素。 - 上级:使用"^"符号表示回到上级元素。例如,"div+div&gt;p&gt;span+em^bq"会在div后面生成另一个div,该div内包含一个p元素和span元素,然后...

    emmet-npp.zip

    2. **层级嵌套**:Emmet支持多层嵌套,如`nav#main&gt;ul.menu&gt;li.item*a`会生成: ```html &lt;ul class="menu"&gt; &lt;li class="item"&gt; &lt;a&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; ``` 3. **属性插入**:在元素后面加上`.`后...

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者...需要给&lt;ul&gt;里面动态添加的&lt;li&gt;标签添加click事件   jquery 1.7版以前使用live

    ps切图生成div_css代码

    ps切图生成div_css代码 一、软件 网页切图主要是通过设计软件将网页效果图切成适合网页浏览的小图片,再将其图片与html和css结合,最终得到与设计一摸一样的静态网页!目前最常见和最实用的软件就是PS和FW,他们都...

Global site tag (gtag.js) - Google Analytics