JS添加方法:
function copySelectInfo(v){
var copyInfoHtml ='<div id="newDiv'+v+'">逻辑关系:';
copyInfoHtml +='<select name="whereGuanXi">' ;
copyInfoHtml +='<option value=" AND ">与(AND)</option>';
copyInfoHtml +='<option value=" OR ">或(OR)</option>';
copyInfoHtml +='</select><br>';
copyInfoHtml += document.getElementById("whereSelect").outerHTML;
copyInfoHtml +=' 关系 ';
copyInfoHtml +='<select name="guanXi">' ;
copyInfoHtml +='<option value=" > ">大于(>)</option>';
copyInfoHtml +='<option value=" < ">小于(<)</option>';
copyInfoHtml +='<option value=" => ">大于等于(=>)</option>';
copyInfoHtml +='<option value=" <= ">小于等于(<=)</option>';
copyInfoHtml +='<option value=" = ">等于(=)</option>';
copyInfoHtml +='<option value=" LIKE ">模糊(LIKE)</option>';
copyInfoHtml +='</select>';
copyInfoHtml +=' 值:<input type="text" name="whereValue" style="width:20%"/></div>';
// 将页面对象输出HTML
var myDivOutHtml = document.getElementById("myDivHtml").outerHTML;
// 将输出的HTML追加到指定的层中
document.getElementById("myDivHtml").innerHTML = myDivOutHtml + copyInfoHtml;
}
// 新增DIV层并给其ID命名
function addDiv(){
document.getElementById("myDivCount").value = (document.getElementById("myDivCount").value*1) +1;
var v = document.getElementById("myDivCount").value;
copySelectInfo(v);
}
// 移除DIV
function removeDiv(){
var v = document.getElementById("myDivCount").value;
if(v > 0){
var id = "newDiv"+v;
var div = document.getElementById(id);
div.removeNode(true);
document.getElementById("myDivCount").value = (document.getElementById("myDivCount").value*1) -1;
} else {
alert("至少要保留一个条件");
}
}
先调用:addDiv()方法.
原理:其实很简单因项目中有此需求只能这样充数了,每调用一次addDiv方法,会去读一个text 的value值,并用这个值追加div
ID的名字的后边,为确定div ID唯一性.并把text 的值在加 1 .删除方法也很简单直接移动当前div
即可了.removeDiv方法也是在调用的时候读取text 的值(就算是共享变量吧)调用完之后在
-1.这样就能确定添加和移动的时候的ID的唯一性.其实不减也可以.
分享到:
相关推荐
主要介绍了js动态创建及移除div的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <div class=home> <div class=container> <div class=...
主要介绍了js动态删除div元素基本思路及实现代码,需要的朋友可以参考下
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,...另外还有一种实现方法就是通过Vue.extend来动态地创建实例,在想要进行显示的时候创建实例。 在需要隐藏的时候删除这个实例。 1.通过Vue.extend创建构造
代码片段: <header> ...input type="text" autofocus placeholder="Enter a task..." id="item">...<div id='animationDiv'> ..." xml:space="preserve"><g><path class="fill" d="M16,8c0,0.5-0.5,1-...</div>
1.div标签 <div id=mDiv3> <p>1</p> <button onclick=myFun9()>添加</button> </div> 2.js function myFun9() { var mDiv3 = document.getElementById(mDiv3); //获取组件1 var eleme = document....
相反,每个幻灯片元素都是动态创建的DIV,其CSS属性“ background-image”设置为“(url_of_image)固定无重复中心中心”-CSS属性“ background-size”设置为“ cover”。 这样做是为了确保在适合幻灯片放映的父...
11.4.2 创建删除按钮字段 374 11.4.3 创建验证字段 376 11.5 小结 378 第12章 使用DetailsView控件和FormView控件 379 12.1 使用DetailsView控件 379 12.1.1 使用DetailsView控件显示数据 379 12.1.2 在DetailsView...
标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每个面板都有标题、图表和关闭按钮。当标签被选中之后,会显示相应面板的内容。 使用HTML标记创建...
1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。 2、js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3、好像不够完善勿喷 效果预览:...
HTML 添加多个标签以结构化的方式组织如何限制文本输入添加多个样式类等等CSS 如何进行基本造型添加外部样式表特性使用类添加样式使用标签名称添加样式如何重塑div 定位柔性等等JS 动态创建元素动态删除元素如何在 ...
我们在结构层中已经将所有用于创建九宫格的结构全部删除了,那么在我们就要在行为层(js)中动态的创建它。 在这里我们会遇到一个问题:我们想将所有应用了class="box"的div都用循环的方式遍历出来……
内容丰富的动态配置,useExtractDomainv 0.7(2021/01/04) 修复动态配置reducer错误,创建页面功能,添加react-spring,添加google-gtag插件0.7.2:离线测试0.7.3:测试版式0.7.4:测试div换行0.7.5:测试删除配置...
10.20 动态创建listview列表项 10.21 动态加载和切换页面 10.22 在页面切换时显示加载进度框 10.23 在屏幕旋转时更改显示样式 10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行...
var buttonDiv = document.createElement('div'); buttonDiv.innerHTML = G.options.buttonHTML; DragZoomUtil.style([buttonDiv], {cursor: 'pointer', zIndex:200}); DragZoomUtil.style(...
4.11.htm 创建和删除对象的例子 4.12.htm 用delete移除了myArry的第二个元素 4.13.htm 用“()”改变运算优先级的例子 4.14.htm 一个运算符结合性的例子 第5章(/C05/) 5.1....
许多游戏显示是在html div中动态创建的。 在html中创建了一些元素,例如表单提交按钮。 我通过添加和删除“ hide”类,并在CSS中为“ hide”类赋予“ display:none”属性,来利用“ hide”类来隐藏和显示它们。 ...
5.5 创建动态iframe 89 5.6 在文档之间共享函数 90 5.7 打开新窗口 92 5.8 为窗口加载不同的内容 96 第6章 表单处理 98 6.1 选择并转移导航菜单 99 6.2 动态地改变菜单 102 6.3 建立必须填写的字段...
##使用的技术: javascript - 动态创建卡片组(整个 HTML 卡片组堆叠) - 创建后立即洗牌- 计算每手牌的总数- 向玩家和自己发牌- 将牌推回 dec 并在打完手牌后重新洗牌查询- 选择 DOM 中的元素以动态打印结果(现金...