<html>
<head>
<title>动态添加html元素</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addCheckDetail(form,afterElement){
textNumber++;
//创建列表标签
var label2=document.createElement("label");
label2.appendChild(document.createTextNode("问题所属方面："));
var select=document.createElement("select");
select.setAttribute("select","select"+textNumber);
select.setAttribute("size","1");
select.setAttribute("id","select"+textNumber);
var option1=document.createElement("option");
option1.setAttribute("value","1");
option1.appendChild(document.createTextNode("方面一"));
var option2=document.createElement("option");
option2.setAttribute("value","2");
option2.appendChild(document.createTextNode("方面二"));
label2.appendChild(select);
select.appendChild(option1);
select.appendChild(option2);
form.insertBefore(label2,afterElement);
// 创建文本标签
var label1 = document.createElement("label");
// 创建文本框
var textField = document.createElement("textarea");
textField.setAttribute("name","txt"+textNumber);
textField.setAttribute("cols",80);
textField.setAttribute("rows",3);
textField.setAttribute("id","txt"+textNumber);
// 增加标签文本注释
label1.appendChild(document.createTextNode("问题描述"+textNumber+":"));
// 把textField放入标签中
label1.appendChild(textField);
// 把所有的这些增加到form中
form.insertBefore(label1,afterElement);
}
function removeCheckDetail(form,afterElement){
// 假如有文本框个数超过一个
if (textNumber > 1) {
// 删除最后一个添加的文本框
form.removeChild(document.getElementById("select"+textNumber).parentNode);
form.removeChild(document.getElementById("txt"+textNumber).parentNode);
textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<table><tbody>
<label>问题所属方面：
<select name="select" size="1" id="">
<option value="1">问题一</option>
<option value="2">问题二</option>
</select>
</label>
<label>问题描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label>
<p>
<input type="button" value="添加一个问题" onclick="addCheckDetail(this.form,this.parentNode)" />
<input type="button" value="删除最后一个问题" onclick="removeCheckDetail(this.form)" />
</p>
<p><input type="Submit" value="保存" /></p>
</tbody></table>
</form>
</body>
</html>
我想用javascript动态增加行,当form中没有table标签时是可以增加的,像上面增加了table标签就出现错误了,请问各位该如何解决?
=======================================
解决方案:
由于form.insertBefore是将指定节点添加到form的直接子节点上,由于form中只有一个table,没有afterElement这个直接子节点.所以会报错.
input标签的parentNode即p标签,它的直接父结点是TBODY标签.所以只能用TBodyElement.insertBefore.进行插入.
把
Js代码
form.insertBefore(label2,afterElement);
form.insertBefore(label1,afterElement);
两句改为:
afterElement.parentNode.insertBefore(label2,afterElement);
afterElement.parentNode.insertBefore(label1,afterElement);
分享到：
相关推荐
在JavaScript编程中，动态增加文本框是一项常见的交互功能，它允许用户在页面上根据需要添加额外的输入元素，而无需离开当前页面或进行页面刷新。这个功能常用于表单提交、数据输入等场景，比如创建多行文本输入、...
标题 "给 Table 增加行的 JavaScript 函数" 暗示了我们要讨论的是如何在 HTML 表格（Table）中动态添加行的方法，这是一个常见的前端开发任务，尤其是在构建数据展示或者用户交互的网页应用时。JavaScript 作为...
### 标签解析：“javascript 控制 增加行 删除行” 这些标签强调了本段代码的核心功能，即通过JavaScript实现对HTML表格行的增加和删除控制。这对于理解代码的主要目的和功能至关重要。 ### 代码解析与扩展 在...
本文将详细讲解如何在C#环境下，使用VS2005进行开发，实现GridView动态增加行的功能。 首先，我们需要理解GridView的基本用法。GridView控件能够自动绑定到数据源（如SQL数据库、数组等），并自动生成表格来显示...
以下是一些最常见的JavaScript错误及其解决方案： 1. **错误：for..in遍历数组** 当使用`for..in`循环遍历数组时，这不是一种推荐的方法，因为它不保证顺序，并可能因自定义的Array.prototype方法导致额外的遍历。...
"js 动态增加删除行hwh"这个主题主要涉及到JavaScript操作DOM（Document Object Model）节点的能力。DOM是网页内容的结构化表示，通过它可以方便地对页面元素进行增删改查。 首先，让我们深入了解如何使用...
在这个"JavaScript例子—实现行的增加、删除、全选、反选"的示例中，我们聚焦于表格操作，这是网页数据展示和用户交互的常见方式。下面将详细解释如何使用JavaScript实现这些功能。 首先，全选和反选功能通常是通过...
在网页开发中，动态增加table行是一项常见的需求，特别是在数据展示和交互丰富的应用中。这个功能使得用户可以在表格中实时添加、编辑或删除数据行，提供了更好的用户体验。下面将详细解释这一技术及其相关知识点。 ...
标题中的“动态增加删除行.html”暗示我们这篇内容可能与前端开发有关，特别是涉及到HTML页面中动态操作表格（table）的行（row）增删功能。这种技术在Web应用程序中非常常见，允许用户交互式地管理数据展示。下面将...
"JavaScript中常见错误分析" JavaScript是一种新型的描述语言，可以被嵌入HTML的文件之中，增加网页的互动性。透过JavaScript能及时响应用户的需求事件，对提交表单做即时的检查，而不用任何的网络来回传输资料。...
本示例"用按钮增加表格"探讨了如何利用JavaScript技术动态地在网页上添加表格行，从而提升用户体验，使得用户可以通过点击按钮来实时增加表格数据。下面将详细解释这一过程中的关键知识点。 1. **HTML基础**：首先...
然而，随着JavaScript应用的复杂性增加，理解和调试代码变得越来越困难。这就是动态代码分析工具如Iroh发挥作用的地方。 标题中的"Iroh是JavaScript的动态代码分析工具"表明Iroh是一个专门用于帮助开发者在运行时...
标题中的“javascript经典特效---input框的增加.rar”暗示了我们将会探讨JavaScript在网页中实现输入框（input）增加效果的技术。JavaScript是一种广泛用于网页动态交互的编程语言，它可以为HTML元素添加各种功能，...
JavaScript是一种在网页设计中广泛应用的脚本语言，尤其在动态网页设计中发挥着至关重要的作用。该语言由Netscape公司推出，最初基于LiveScript，后来融入Java的设计思想，但语法上仍然保持与Java的相似性，同时具备...
在动态增加表单元素时，JavaScript发挥关键作用。例如，你可以使用`document.createElement()`创建新的`<input>`元素，然后使用`appendChild()`将其添加到页面的某个部分。以下是一个简单的例子： ```javascript ...
在"272个超酷经典推荐JavaScript代码"这个资源中，我们可以预见到一系列实用且创新的JavaScript编程示例，这些示例将帮助开发者提升他们的技能，并为网页增加丰富的用户体验。 1. **基础语法和数据类型**：...
在网页表单或表格中，动态增加行是指用户可以通过点击按钮等方式，实时地在表格中添加新的行，而无需刷新整个页面。这在数据输入和展示时非常实用，提高了用户体验。 要实现这一功能，我们可以遵循以下步骤： 1. *...
8. 错误处理：良好的错误处理能确保应用在遇到问题时仍能优雅地运行。例如，当用户尝试添加已不存在的商品，或数量超出库存时，JavaScript应该捕获并处理这些异常情况，给出相应的提示信息。 以上就是基于给定的...
7. **安全最佳实践**：书中讨论了JavaScript的安全问题，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF），并提供了解决这些问题的方法。 8. **DOM操作**：JavaScript与HTML的交互主要通过DOM（Document Object Model...