Js为表单动态添加节点内容的方法
本文实例讲述了Js为表单动态添加节点内容的方法。分享给大家供大家参考。具体如下:
1. 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增加节点</title>
<script type="text/javascript">
function newPicture() {
var picElement = document.createElement("img");
picElement.src = "images/success.jpg";
picElement.width = 100;
picElement.height = 100;
document.body.appendChild(picElement);
}
function newNode() {
var olElement = document.getElementById('answers');
var liElement = document.createElement('li');
var inputElement = document.createElement('input');
inputElement.type = "text";
inputElement.name = "answer";
liElement.appendChild(inputElement);
olElement.appendChild(liElement);
}
</script>
</head>
<body>
<div>
<input type="button" name="button" value="增加一张图片" onclick="javascript:newPicture();"/>
<input type="button" name="button" value="增加一个选项" onclick="javascript:newNode();"/><br />
<ol id="answers">
<li><input type="text" name="answer" /></li>
</ol>
</div>
</body>
</html>
2. 程序效果图:
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
JavaScript实现动态增加文件域表单
js代码: 复制代码 代码如下: <script language="javascript"> //全局变量,代表文件域的个数,并用该变量区分文件域的name属性 var file_count = 0; //增加文件 域 function additem(id) { if (file_count > 9) { alert("最u22810 10个u25991 件u22495 "); return; } //定义行变量row:单元格变量cell:单元
-
JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f
-
用JS动态改变表单form里的action值属性的两种方法
方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">
-
js form action动态修改方法
一般比较简单的就是document.formName.action="/dddd.do?ddd="+str document.formName.submit(); 写成函数式的调用就是 复制代码 代码如下: <script language="JavaScript" > function checkaction(v){ if(v==0){ document.dbform.action="index.php?admin_db-repair&quo
-
javascript写的一个表单动态输入提示的代码
*{ margin:0px;padding:0px;font-size:12px; } input{ width:100px;height:20px;border:1px solid #ccc; } function tips(id,str){ var l=document.getElementById(id).offsetLeft+120; var t=document.getElementById(id).offsetTop; document.getElementById("tips&qu
-
javascript实现的动态添加表单元素input,button等(appendChild)
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等 复制代码 代码如下: newInput.type=mytype; newInput.name="input1"
-
js动态生成form 并用ajax方式提交的实现方法
Js代码: var tempForm = document.createElement("form"); tempForm.action="http://localhost:8080/test/user"; tempForm.method="post"; document.body.appendChild(tempForm); //create a submit button var tempInput = document.createElem
-
JavaScript实现动态添加Form表单元素的方法示例
本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo
-
javascript创建动态表单的方法
本文实例讲述了javascript创建动态表单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
-
Js为表单动态添加节点内容的方法
本文实例讲述了Js为表单动态添加节点内容的方法.分享给大家供大家参考.具体如下: 1. 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
jQuery实现表单动态添加与删除数据操作示例
本文实例讲述了jQuery实现表单动态添加与删除数据操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户名注册</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js
-
jQuery实现表单动态添加数据并提交的方法
本文实例讲述了jQuery实现表单动态添加数据并提交的方法.分享给大家供大家参考,具体如下: 情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.a
-
Vue form表单动态添加组件实战案例
今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,就是在form中我们需要动态的增加组件模块,效果如下: 这种效果实现其实就是对 v-for 指令的一种使用,组件不是必须的,只是为了将这部门的代码我们单独的拎出来,便于查看,好了,话不多说,我们来看下具体怎么来实现. 案例效果的实现 1.创建组件 首先我们创建一个单独的组件,同时在 template 中定义我们的表单元素,此处使用的是 element UI 来实现效果. 2.import组件 我们需要在父组件中引入创建的组件,并通
-
js防止表单重复提交的两种方法
第一种:用flag标识,下面的代码设置checkSubmitFlg标志: 复制代码 代码如下: <script language=""javascript""> var checkSubmitFlg = false; function checkSubmit(){ if(checkSubmitFlg ==true){ return false; //当表单被提交过一次后checkSubmitFlg将变为true,根据判断将无法进行提交. } checkS
-
js控制表单奇偶行样式的简单方法
一.如果使用JQuery的话可以直接JQuery的 复制代码 代码如下: $("tr:odd").addClass("clazzName"); $("tr:even").addClass("clazzName"); 二.如果是使用纯js的话 1.先获取table标签,var table = document.getElementById() 2.再获取里面的tbody标签var tbody = table.getElement
-
Vue+Element实现动态生成新表单并添加验证功能
首先有一个这样的需求,表单中默认有一个联系人信息,用户可以再添加新的联系人信息 点击添加更多联系人之后 官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的新增,可以考虑的实现方法是先写死一个必须的表单,需要新增的两个表单放在一个div里,在div中使用v-for生成,达到同时新增的效果 代码如下 //必填一个联系人的表单 <el-form-item class="rules" label="通知对象:" prop="noti
-
jQuery实现表单动态加减、ajax表单提交功能
对于前端开发,我的归类是分2种层次,首先第一种是基于前端架构上的开发,有一些后台开发的同事会瞧不起搞前端的,他们认为前端无非是画个页面嘛,这就有点夜郎自大了.现在我了解的一些前端框架基本分为3个主流框架:ReactJs,Vue,angularjs,前两个还是目前的主流趋势.第二种就是基于市面上的一些非主流工具包,比如BUI,FLatUI等,再结合自己的dom操作. 好了,废话不多说了,本篇文章主要讲怎么去实现表单动态加减的效果,花了一天时间搞出来,特来分享一下.本文主要分为两部分: 一是页面表单
-
js实现表单提交后不重新刷新当前页面
如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'> <input type="button" id="btnSubmit" name="btnSubmit" value="保存" onclick="addKp()" class="Button2
-
JS实现表单多文件上传样式美化支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f
随机推荐
- 正则表达式搭配js轻松处理json文本方便而老古
- javascript 新闻列表排序简单封装
- for命令的一些bug分析
- 命令行下一种新的添加帐号的方法(Shell.Users)
- Android拼图游戏 玩转从基础到应用手势变化
- java编程经典案例之基于斐波那契数列解决兔子问题实例
- iOS中的NSURLCache数据缓存类用法解析
- OpenStack初始化浅析
- JavaScript生成验证码并实现验证功能
- JavaScript自定义文本框光标
- 基于JavaScript实现手机短信按钮倒计时(超简单)
- 解析Android中webview和js之间的交互
- JavaScript中匿名、命名函数的性能测试
- 分享JavaScript获取网页关闭与取消关闭的事件
- python使用opencv读取图片的实例
- ADO.NET实体数据模型详细介绍
- 教你如何解密 “ PHP 神盾解密工具 ”
- PHP修改session_id示例代码
- 一个酷炫的Android图表制作框架
- 浅析SQL语句中GROUP BY的用法