js动态生成文本框并有删除功能

### JS动态生成文本框并实现删除功能的知识点 在现代Web开发中，动态地操作DOM（文档对象模型）是常见的需求之一。通过JavaScript可以轻松地实现这一目标。本篇文章将详细解析如何使用JavaScript来动态创建文本框，并为这些文本框添加删除功能。 #### 一、HTML结构设置 在给定的代码片段中，我们首先看到的是一个简单的HTML页面结构。它包含了一个表单(form)，该表单内有一个表格(table)和几个输入元素(input)以及按钮(button)。其中，表格的ID被设置为“tb”，用于后续JavaScript中的操作。 ```html <form name="form" method="post" action="addrow.php"> <table id="tb"></table> <input type="text" name="num"> <input name="button" type=button onClick='additem("tb")' value="添加>>"> <input type="text" name="totalNumber" value=""> <!-- 记录增加了多少文本框 --> <input type="submit" name="submit" value="提交"> </form> ``` #### 二、JavaScript实现动态生成文本框 接下来是JavaScript部分，这部分代码负责动态生成文本框及相应的删除按钮。 ##### 2.1 添加文本框 在`additem`函数中，通过`getElementById`获取指定ID的表格，然后调用`insertRow`方法向表格中添加新的一行。接着，通过`insertCell`方法向新添加的行中插入单元格，并且在这个单元格中添加了一个文本输入框和一个删除按钮。每个输入框的名字都带有唯一的编号(`StuName` + `newItemNumber`)，以便于区分每一个输入框。 ```javascript function additem(id) { var row, cell, str; row = document.getElementById(id).insertRow(); if (row != null) { cell = row.insertCell(); cell.innerHTML = "<input type=\"text\" name=\"StuName" + newItemNumber + "\"><input type=\"button\" value=\"删除\" onclick='deleteitem(this);'>"; document.getElementsByName("totalNumber")[0].value = newItemNumber++; } } ``` 这里需要注意的是，`newItemNumber`变量用于记录已经添加了多少个文本框，以便为每个新添加的文本框生成唯一的名字。 ##### 2.2 删除文本框 `deleteitem`函数则负责删除指定的文本框。它接受一个参数`obj`，这个参数指向触发删除操作的按钮元素。通过访问该按钮元素的父节点等属性，可以找到对应的文本框所在的行，并使用`deleteRow`方法将其从表格中移除。 ```javascript function deleteitem(obj) { var curRow = obj.parentNode.parentNode; alert(curRow); tb.deleteRow(curRow.rowIndex); document.getElementsByName("totalNumber")[0].value = eval(document.getElementsByName("totalNumber")[0].value) - 1; } ``` #### 三、整体逻辑梳理 1. **初始化**: 页面加载时，`newItemNumber`被设置为1，表示第一个文本框。 2. **添加文本框**: 当用户点击“添加>>”按钮时，会触发`additem`函数，从而向表格中添加一行新的文本框。 3. **删除文本框**: 每个文本框旁边都有一个删除按钮，点击后会触发`deleteitem`函数，将当前文本框所在的行从表格中移除。 4. **计数更新**: 每次添加或删除文本框后，都会更新`totalNumber`输入框中的值，以记录当前表格中总的文本框数量。 通过以上步骤，我们可以实现一个动态的文本框生成与删除的功能。这种方式不仅增强了用户体验，也为Web应用提供了更多的灵活性。