文档章节

js动态增加删除ul节点li

风中帆
 风中帆
发布于 2015/08/12 10:04
字数 202
阅读 2914
收藏 4

js动态增加删除ul节点li

1.页面效果

点击添加,可以实现添加文本框;点击移除删除文本框

2.jsp文件

//jsp
<ul id="attrValueUL">
     <li class="attrValueLI" id="attrValueLI_1"><input name="attrValue" type="text"                 class="priceinput"  />
      <input name="attrValue" type="text" class="priceinput" />
      <input name="attrValue" type="text" class="priceinput" />
      <a href="javascript:void(0);" onclick="conAddAttrValue();" style="width:90px;">&nbsp;&nbsp;继续添加属性值</a>
     </li>
    </ul>

 

3.js

//js
<script type="text/javascript">
//添加属性值文本框
function conAddAttrValue(){
 var liNum=document.getElementsByClassName("attrValueLI").length;
 liNum=parseInt(liNum)+1;
 var text='<li class="attrValueLI"id="attrValueLI'+liNum+'" >';
 for (var i = 0; i < 3; i++) {
  text+='<input name="attrValue" type="text" class="priceinput"  />&nbsp;';
 }
 text+='&nbsp;&nbsp;<a href="javascript:void(0);" onclick="removeLi('+liNum+');" style="width:90px;">移除</a></li>';
 $(text).appendTo($("#attrValueUL"));
}
//删除属性值文本框
function removeLi(i){
 $("#attrValueLI"+i).remove();
}

</script>

 

© 著作权归作者所有

风中帆
粉丝 14
博文 197
码字总数 17695
作品 0
青岛
私信 提问
为什么html的这段代码再别人电脑上运行效果不好?

我的浏览器是ie7,搜狗。他们的浏览器是ie8,火狐。代码: 实用的多级树级菜单 功能 系统功能流程 组织结构图及用户角色 组织结构及用户角色 系统功能层次模块图 系统功能层次模块图 个人办公...

稀饭桶子
2012/05/07
728
7
4)jQuery的基础部分和js的部分

1:js: 包含三部分: ESMAScript:基础语法 Array() 索引 、length、push()、pop() DOM: 获取DOM的三种方式: (1)Id (2)Class (3)标签获取 TayName BOM: 入口函数: 等待这文...

tty之星
2018/07/20
0
0
jQuery:插入,复制,替换和删除节点

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery插入,复制、替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2......

北方攻城师
2015/07/01
0
0
Jquery-zTree的基本用法

【简介】 zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性...

0o清风徐来o0
2013/03/28
0
0
JavaScript的浏览器兼容性问题小结。

JavaScript的浏览器兼容问题是前端开发中一直存在的一个问题,和css兼容性一样,我们在开发过程中必须了解一些基本的兼容性处理方法,下面从以下几个方面总结下js开发常碰到的问题:1、常用的...

MiniBu
2012/10/11
0
6

没有更多内容

加载失败,请刷新页面

加载更多

Java8

package com.shi.lambda;import java.util.Arrays;import java.util.List;import org.junit.Test;import com.shi.model.Employee;/** * 初始化案例 * @author xiaosh......

小小小施爷
30分钟前
1
0
c# 动态编译代码

有时候做计算一些东西时候,算法一直变更,写在程序需要一直调整,因此算法写在cs文件,然后动态调用内部的方法去计算判断,只需变更cs文件即可。 using Microsoft.CSharp; using System; us...

朝如青丝暮成雪
30分钟前
3
0
好程序员技术分享html5和JavaScript的区别

好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网...

好程序员IT
33分钟前
2
0
tomcat 与 spring boot 设置虚拟路径

tomcat 设置虚拟路径 <Context path="/uploadDir" docBase="/data"/>path是请求访问的路径docBase是服务器存储文件的路径,Linux 根目录下 data spring boot 虚拟路径设置 registry.addRe......

kdy1994
36分钟前
1
0
var ,let ,const 的区别和共同点

一、let和var区别 1.关于变量提升,var能变量提升,let不能 // 关于var 如下所示console.log(a); //输出undefined,此时就是变量提升var a = 2; console.log(a); //2 //相当于下面...

MrBoyce
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部