当前位置: 代码迷 >> JavaScript >> 如何使用javascript输入和删除字段?
  详细解决方案

如何使用javascript输入和删除字段?

热度:93   发布时间:2023-06-05 14:08:18.0

我想创建两个按钮,一个可以让用户按下该按钮,然后出现一个溺水沉没和一个输入文本字段,另一个可以删除该按钮(如果用户愿意)。

我已经在Google中搜索了它,但是找不到它。

最好的问候,Valter Henrique。

[此处的工作演示:http://jsfiddle.net/GNnSw/1/][1]

您的html

<div id="box" style="display:none;">
        <select>
        <option value="test">Test</option>
    </select>
    <input type="text" value="" id="text1" />
    <input type="text" value="" id="text2" />
</div>
<input type="button" value="show" id="show" />
<input type="button" value="hide" id="hide" />

在jQuery中:

$('#show').live('click', function(){
    $('#box').show();
});

$('#hide').live('click', function(){
    $('#box').hide();
});

使用jQuery,将需要类似以下内容:

<button onclick="$('form').show();">press it</button>

<form>
 //input elements
</form>

在Google顺便搜索一下。

用jQuery完成。

的HTML

<button id="buttonid" value="Click on me!">

jQuery的

$("#buttonid").click(function(){
    var $input = '<input id="inputid" type="text" value="value">';
    // make the input field
    var $select = '<select id="selectid"></select>';
    // make the select
    var $opt1 = '<option name="one">one</option>';
    var $opt2 = '<option name="two">two</option>';
    // make two options
    $select.append($opt1).append($opt2);
    // append to select the options
    $(this).after('<form action="url" method="POST"></form>').append($input).append($select);
    // append input and the select after the button
});

哦耶。 :)顺便说一句,您需要 。

为您的字段创建一个“占位符”:

<div id="placeholder"></div>

添加按钮/链接:

<a onClick="add()">Add Form</a><a onClick="remove()">Remove Form</a>

这到您的javascript文件:

function add() {
document.getElementById('placeholder').innerHTML = "Code for your form...";
}

function remove() {
document.getElementById('placeholder').innerHTML = "";
}

我想通过使用外部JavaScript库 (例如或来实现灵活且用户友好的HTML布局的最佳方法。 原因是-在传统的Web框架中,将HTML内容发送到Web浏览器后, 服务器无法对其进行操作 另外,我想一个很好的原则是只使用Java来提供内容,并使用客户端框架使用用户界面来完成所有操作。 此外,你会发现很多的例子来说明如何使用像图书馆工作 。

如果您真的想使用普通Java,因为您可能对JavaScript有所了解,建议您查看和 。 您几乎可以编写Java代码而没有任何限制,它将自动“转换”(编译)为JavaScript。 但是,应该深思熟虑这一决定,因为学习GWT或Vaading可能会更加耗时并且并不总是适用。

  相关解决方案