动态生成DIV/UL/LI

最新推荐文章于 2021-06-04 15:32:46 发布
最新推荐文章于 2021-06-04 15:32:46 发布
阅读量232 收藏
点赞数
分类专栏： 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>
iteye_20887
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态生成DIV
seedling_lq的专栏
05-11 2220
 function showDialog(url,width,height)...{    if(document.getElementById("showdiv")!=null&&document.getElementById("headdiv")!=null)    ...{        var head = document.getElementById("headdiv");  
ajax智能提示+textbox动态生成下拉框示例代码
10-26
这个`<div>`元素的位置基于触发事件的文本框，并且包含一个`<ul>`列表，其中的`<li>`元素由传入的数据动态生成。 这个下拉列表是绝对定位的，它的高度、宽度、位置和样式都是根据文本框的位置和大小动态计算的。当...
动态创建div
村里的程序员
11-23 798
script type="text/javascript">function creatediv(){    var d = document.createElement("div");        d.style.position="absolute";    d.style.top="1px";    d.style.left="1px";    d.style.zindex="1"; 
动态生成DIV 对象
专栏
07-18 633
 var   str   =   document.createElement("div");   str.id   =   "test";   str.contentEditable = "true";str.className = "test";  str.style.position   =   "absolute";   str.style.setAttribute("left","100
Js动态生成Div、带属性。append()和appendChild()
Mr_Van的博客
08-02 9400
在我们设计前端界面的时候，根据不同用户就需要对应得有不一样的界面实现个性化展示。有的模块就需要根据返回字段进行动态生成。 主要常见的就是innerHTML 需要添加子模块的父div 直接上代码： //获取需要动态生成div的父div var banners = document.getElementById("banners"); for(var i=0; i<vm.bannerList.length; i++){
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
11-29
（<li>中间的元素是动态生成的）， 现在想为添加点击事件， 例子如下： <div> <ul> <li> 这是元素内容</i> //i是动态生成 </span> </li> </ul> </div> 解决方法如下： $[removed]('click', '.icon', ...
jQuery给动态添加的元素绑定事件的方法
12-29
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者...需要给<ul>里面动态添加的<li>标签添加click事件   jquery 1.7版以前使用live
vue.js 实现点击按钮动态添加li的方法
10-18
`<button>`元素用于触发添加`<li>`元素的操作，而`<ul>`是将要动态添加`<li>`元素的目标容器。这里使用了Vue的`v-on:click`指令来监听按钮的点击事件，绑定到名为`ss`的方法： ```html 保存</button> <ul> <li is=...
ajax动态生成树 用于jsp
11-27
本文将深入探讨如何使用Ajax技术在JSP（JavaServer Pages）环境中动态生成树形结构，以实现数据的实时加载和交互。 首先，我们需要理解Ajax的基本原理。Ajax的核心是XMLHttpRequest对象，它允许在不重新加载整个...
js 动态生成div html页面,JS动态创建DIV动态删除DIV
weixin_34561662的博客
06-04 1612
在网页中，我们可以利用JS脚本语言，在页面当中动态的创建div对象，同时，也能根据需要删除那些不必要的div。一、动态创建div代码var msgDiv = document.createElement("div");msgDiv.id = "msgDivId";msgDiv.style.position = "absolute";msgDiv.style.top = 50;msgDiv.styl...
动态插入div
ihuaqiang的博客
07-26 4221
前台页面的div个数根据后台动态的增加. function callBack(data) { jQuery.each(data.result.financeList, function (i, item) { var $invest = $("#invest"); -------1 $invest.append($("#ppb_temp").htm
动态生成div逢十折行
aaa小二
05-16 560
for循环 动态生成div 每十个一行
动态添加菜单<ul>
sinat_33195055的博客
05-03 569
一、js添加 后台返回json 前台遍历 调用函数 function addli(ab) { var ul=document.getElementById("projecthome");  var obj=document.createElement("li");  obj.innerHTML=ab;  ul.appendChild(obj);  } 二、后台添加  Htm
动态生成自定义控件
夏天真热
09-27 391
动态生成<ul><li>自定义控件2008-08-25 08:42<br />前台：<br /><%@ Control Language="C#" AutoEventWireup="true" CodeFile="LeftBar.ascx.cs" Inherits="UserControl_LeftBar" %><br /><div style="width: 100px; height: 100px" id="div1"><br /></div><br /><asp:Panel ID="Panel1" r
前端学习（2489）：初识vue以及引入vue
歌谣的博客
11-02 604
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta ht...
jQuery根据后台查询到的数据动态往div中ul里面的li添加数据（同时动态添加li）
qiaodaima0的博客
08-06 9970
直接看图和代码 页面： js 下面这种写固定个数的li很不好，也不符合要求，如下 我们需要根据后台查到的数据，比如查到5条数据，那就页面显示5个li行数，查到3个就显示3个。 修改 注意id 我们的操作是根据id进行绑定的 JS代码： $(function(){ $.ajax({ url :'这里写传到后台的路径' type: 'pos...
CSS(七) css列表样式（ul）
青柠晶晶的博客
01-25 5336
CSS列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 1.列表 在HTML中，有两种类型的html列表： 无序列表-列表项标记用特殊图形（如：小黑点、小方框等） 有序列表-列表项的标记有数字或字母 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 2.不同的列表项标记 list-style-type属性指定属性列表...
在前端页面中 默认生成了数据如下<template> <div class="content"> <div class="row"> <div class="list"> <ul> <li>序号</li> <li>权限</li> <li>角色</li> <li>账号</li> <li>编辑</li> </ul> </div> </div> <div class="row"> <div class="lists"> <ul v-for="item in dataList" :key="item.id"> <li>{{ item.userid }}</li> <li>{{ item.authority }}</li> <li>{{ item.role }}</li> <li>{{ item.username }}</li> <li @click="ect">编辑</li> </ul> </div> </div> </div> </template> <script setup> import { ref, onMounted } from "vue"; import { getList } from "@/api/user"; const dataList = ref([]); onMounted(async () => { try { const response = await getList(); dataList.value = response.data; } catch (error) { console.error(error); } }); </script> 如何实现对数据修改并且不改变id
最新发布
06-09
<li>序号</li> <li>权限</li> <li>角色</li> <li>账号</li> <li>编辑</li> </ul> </div> </div> <div class="row"> <div class="lists"> <ul v-for="item in dataList" :key="item.id"> <li>{{ item....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值