JSP中使用JavaScript动态插入删除输入框实现代码

原创

mob649e8153b214 2023-10-25 06:30:44 ©著作权

文章标签 输入框代码示例 javascript 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8153b214的原创作品，请联系作者获取转载授权，否则将追究法律责任

JSP中使用JavaScript动态插入删除输入框实现代码

在开发Web应用程序的过程中，经常会遇到需要动态添加或删除输入框的需求。在JSP中，可以使用JavaScript来实现这一功能。本文将介绍如何使用JavaScript在JSP页面中动态插入和删除输入框，并提供相应的代码示例。

1. 动态插入输入框

要实现动态插入输入框的功能，我们可以使用JavaScript的appendChild方法将新创建的输入框添加到指定的父元素中。以下是一个示例代码，演示了如何在JSP页面中动态插入输入框。

<script>
function addInput() {
    var container = document.getElementById("container"); // 获取父元素
    var input = document.createElement("input"); // 创建新的输入框
    input.type = "text"; // 设置输入框类型
    container.appendChild(input); // 将输入框添加到父元素中
}
</script>

<button onclick="addInput()">添加输入框</button>
<div id="container"></div>

上述代码中，我们首先定义了一个名为addInput的JavaScript函数。当点击按钮时，该函数会被调用。在函数中，我们首先通过getElementById方法获取到名为"container"的父元素（在页面中用div标签表示）。然后，通过createElement方法创建一个新的输入框，并设置其类型为"text"。最后，使用appendChild方法将新创建的输入框添加到父元素中。

点击"添加输入框"按钮后，页面上将会动态生成一个新的输入框，该输入框会出现在"container"父元素的末尾。

2. 动态删除输入框

要实现动态删除输入框的功能，我们可以使用JavaScript的removeChild方法从指定的父元素中移除子元素。以下是一个示例代码，演示了如何在JSP页面中动态删除输入框。

<script>
function removeInput() {
    var container = document.getElementById("container"); // 获取父元素
    var inputs = container.getElementsByTagName("input"); // 获取所有的输入框
    if (inputs.length > 0) {
        container.removeChild(inputs[inputs.length - 1]); // 移除最后一个输入框
    }
}
</script>

<button onclick="removeInput()">删除输入框</button>
<div id="container">
    <input type="text">
    <input type="text">
    <input type="text">
</div>

上述代码中，我们定义了一个名为removeInput的JavaScript函数。当点击按钮时，该函数会被调用。在函数中，我们首先通过getElementById方法获取到名为"container"的父元素。然后，使用getElementsByTagName方法获取到所有的输入框。如果页面上存在至少一个输入框，我们通过removeChild方法将最后一个输入框从父元素中移除。

点击"删除输入框"按钮后，页面上最后一个输入框将会被动态删除。