页面源码
<!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>ccccc</title>
</head>
<body>
<div class="place">
<div id="board" style="padding-left: 15px">
<form action="/test/asc.do?m=create" method="post"
onsubmit="return check2();">
<table class="add">
<td align="right">
</td>
<td align="left">
<span id="upload">
<div id="div_0">
<input type="text" style="height: 16px" size="30"
name="configure" />
<a href='javascript:void(0)' onclick="removeInput2('div_0')">删除</a>
</div> </span>
</td>
</tr>
<tr>
<td colspan="4" class="add">
<input type="button" name="button" value="ADD"
onclick="createInput()">
<input type="button" name="button" value="ADD2"
onclick="createInput2()">
<input type="button" name="button" value="cs" onclick="cs()" />
</td>
</tr>
<tfoot>
<tr>
<td></td>
<td>
<input type="text" name="userId2" />
<input type="submit" class="button" id="Submit1" value="确定" />
</td>
</tr>
</tfoot>
</table>
</html>
</div>
</div>
<script>
var div0_outerHTML=document.getElementById("div_0").outerHTML;
var i=1;
function createInput2(){
alert(div0_outerHTML);
var div_outerHTML = div0_outerHTML.replace(/_0/g, "_"+i);
var shtml=document.getElementById("upload").innerHTML;
document.getElementById("upload").innerHTML = shtml + div_outerHTML;
i++;
}
function removeInput2(DIVID){
var aElement = document.getElementsByName("configure");
if(aElement.length==1){
alert("最后的数据 不要删除");
return ;
}
document.getElementById(DIVID).outerHTML="";
}
function createInput(){
var p=document.createElement("div");
p.id="div"+i;
var aElement=document.createElement("input");
//aElement.name="configure";
aElement.setAttribute("name","configure");
aElement.id="configure";
aElement.type="text";
aElement.size="30";
var A = document.createElement("A");
A.onclick = function (){removeInput(p.id);};
A.setAttribute("href","javascript:void(0)");
A.appendChild(document.createTextNode("删除"));
p.appendChild(aElement);
p.appendChild(A);
if(document.getElementById("upload").appendChild(p) == null)
{
return false;
}
i++;
return true;
}
function removeInput(divid){
var aElement = document.getElementById("upload");
var parent= document.getElementById(divid);
alert(divid);
alert(parent)
alert(parent.id);
if(aElement.removeChild(parent) == null) {
return false;
}
return true;
}
function check2(){
var aElement = document.getElementsByName("configure");
alert(aElement);
alert(aElement.length);
for(j=0;j<aElement.length;j++){
alert(aElement[j].value)
}
return true;
}
function cs(){
alert( document.getElementById("upload").outerHTML);
}
</script>
</body>
</html>
document.createElement 动态添加 input与A有如下两个问题(IE7)
1. var aElement=document.createElement("input");
//aElement.name="configure";
aElement.setAttribute("name","configure");
上述方法 name属性无法赋值
解决方案:aElement.id="configure"; 设置Id属性
2 A.setAttribute("onclick","removeInput(p.id)");
解决方案： A.onclick = function (){removeInput(p.id);};
分享到：
相关推荐
var btn = document.createElement("inputtype='button'value='我是动态创建的2'" + "onclick='OnClick2(this)'/"); document.body.appendChild(btn); } function OnClick2(btn) { alert(btn.value); } ``` **...
总结来说，动态生成form并用Ajax方式提交主要涉及以下几个步骤： 1. 使用JavaScript创建表单元素。 2. 添加必要的表单字段，如隐藏输入元素，以传递数据。 3. 避免使用`submit()`直接提交表单，而是采用Ajax库（如...
var a = document.createElement("input"); // 创建一个 input 元素 a.type = "button"; // 设置元素类型为按钮 a.value = "按钮A"; // 设置按钮的显示文本 a.attachEvent("onclick", addInputB); // 添加点击...
如果要在单元格中添加下拉框或输入框，我们可以使用`<select>`和`<input>`标签。 在JavaScript中，可以使用DOM操作来动态创建这些元素。以下是一些关键步骤： 1. **创建表格元素**： ```javascript var table = ...
在使用JavaScript动态创建`<table>`元素并添加行（`<tr>`）或单元格（`<td>`）时，直接使用`document.createElement()`结合`appendChild()`可能无法在Internet Explorer（IE）中正确显示。 **解决方法：** 为了确保...
根据提供的代码片段，我们可以将其分为以下几个部分来进行详细分析： ##### 步骤一：创建遮罩层 ```javascript function updatephoto() { var div = document.createElement("div"); div.id = "ms"; div.style....
在JavaScript（JS）编程中，创建动态标签是一种常见的需求，特别是在网页交互和用户界面设计中。"js输入关键词创建标签代码.zip" 提供了一个解决方案，它允许用户输入关键词，然后根据这些关键词自动生成对应的HTML...
在介绍如何用JavaScript实现点击事件添加一个input节点之前，我们首先需要了解几个基础的Web编程概念和知识点。首先，JavaScript是一种动态的脚本语言，它可以通过文档对象模型（DOM）与HTML文档的元素进行交互。DOM...
例如，如果要添加一个文本输入框，可以使用`document.createElement('input')`来创建一个`<input>`标签。接着，可以通过`element.type = 'text'`设置输入框类型，`element.id = 'newInput'`设置ID，以及`element....
JavaScript部分主要负责处理用户交互，具体包括以下几个关键操作： 1. **添加行**：当点击“添加到表格”按钮时，JavaScript会捕获这个事件，读取输入框的值，并创建一个新的表格行。新行包含与现有行相同结构的四...
首先，代码展示了如何通过JavaScript中的几个函数来实现动态添加标签的功能，具体涉及到了document.createElement、setAttribute以及appendChild等函数的应用。以下是对这些知识点的详细解释： 1. document....
在动态添加标签实现方法中，我们主要关注以下几个方面： 1. **获取节点**： `getElementById()`方法用于根据ID获取唯一的DOM元素，如`test1`函数中所示。如果有多重ID相同的元素，该方法只会返回第一个匹配的元素...
总结来说，"Javascript 动态添加表单实例"涵盖了以下几个关键点： 1. 使用`document.createElement`创建表单元素。 2. 设置元素属性和值，如`setAttribute`和`value`。 3. 添加元素到DOM树，如`appendChild`。 4. ...
总结，使用纯JavaScript实现可编辑表格涉及以下几个关键知识点： 1. HTML表格结构和元素 2. JavaScript事件监听（click、blur等） 3. 动态DOM操作（创建、移除、修改元素） 4. 本地存储（localStorage）进行数据持久...
document.getElementById("output").value = document.getElementById("input").value.toUpperCase(); ``` ### 7. 数据类型 JavaScript 中有几种基本的数据类型，包括 `String`, `Number`, `Boolean`, `Null`, `...
在JavaScript中，实现`input` 联想输入通常包括以下几个步骤： 1. **事件监听**：首先，我们需要监听`<input>`元素的`keyup`事件，每当用户释放一个按键时触发。 ```javascript document.getElementById('...
如果希望在不干扰用户操作的情况下动态添加参数，那么可以考虑使用JavaScript动态添加input的方法。而当需要对表单提交进行更细致的控制时，使用Ajax提交拼接参数则是更好的选择。每种方法都有其适用场景和限制，...
let input = document.createElement('input'); input.type = 'text'; document.getElementById('form').appendChild(input); ``` 2. 单行删除：通过`removeChild`方法删除指定元素，例如： ```javascript let ...
根据提供的文件信息，我们可以梳理出一系列JavaScript相关的知识点。下面将对这些知识点进行详细的解释与扩展。 ### 1. `document.write("");` 输出语句 在JavaScript中，`document.write()` 方法用于向当前文档写...
利用JavaScript创建一个动态的日历，可以根据用户选择的月份和年份更新显示内容。 ```javascript function createCalendar(year, month) { let calendarDiv = document.getElementById("calendar"); calendarDiv....