Question

我需要动态添加和删除HTML元素到我的产品表单（属性添加目的）并且正在搜索堆栈溢出。

我发现这个解决方案非常接近（除了它没有删除选项加上我真诚地不知道如何检索每个文本框的数据，但后来所有这些）。

小提琴中的代码很好用。但是当我在我的本地机器上尝试它时，它无法产生任何结果。

这就是我做的事情

的index.html

<!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>Untitled Document</title>

    <style type="text/css">
        .extraPersonTemplate {display:none;}
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
             $('<div/>', {
                 'class': 'extraPerson',
                 html: GetHtml()
             }).appendTo('#container');
             $('#addRow').click(function () {
                 $('<div/>', {
                     'class': 'extraPerson',
                     html: GetHtml()
                 }).hide().appendTo('#container').slideDown('slow');

             });
         })

         function GetHtml() {
             var len = $('.extraPerson').length;
             var $html = $('.extraPersonTemplate').clone();
             $html.find('[name=firstname]')[0].name = "firstname" + len;
             $html.find('[name=lastname]')[0].name = "lastname" + len;
             $html.find('[name=gender]')[0].name = "gender" + len;
             return $html.html();
         }    
    </script>

</head>

<body>
<div class="extraPersonTemplate">
    <div class="controls controls-row">
        <input class="span3" placeholder="First Name" type="text" name="firstname">
        <input class="span3" placeholder="Last Name" type="text" name="lastname">
        <select class="span2" name="gender">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>
</div>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>
</body>
</html>

这是结果

enter image description here

我在复制粘贴时出错了什么？

Answer 1

您需要加载jQuery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您需要加入Ecto.Query。如果你检查jQuery（你肯定应该），你可能会发现这个错误：

$ is not defined

这是因为在尝试使用jQuery之前没有加载jQuery。在您的javascript代码之前将其添加到您的页面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您可以在JSFiddle中看到您包含这些库，但是当您只是复制粘贴时，您不会包含它们。包括这些javascripts

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 4

将JavaScript移到setConnection(); //IT IS OK, SO DONT WORRY!! =) String insert = "insert into DATABASE.TABLE (START_DATE , STATUS, PROCESS)"; PreparedStatement pstm = getConnection().prepareStatement(insert); Calendar calendar = Calendar.getInstance(); Timestamp ts = new java.sql.Timestamp(calendar.getTime().getTime()); String mydate = new SimpleDateFormat("yyy-MM-dd hh:mm:ss").format(ts); ArrayList<Object> values = new ArrayList<Object>(); values.add(0, mydate); values.add(1, new Integer(0)); values.add(2, "TEST_PROCESS"); for (int i = 0; i < values.size(); i++) { if (values.get(i).getClass().equals(Integer.class)) pstm.setInt(i+1, (Integer) values.get(i)); if (values.get(i).getClass().equals(String.class)) pstm.setString(i+1, (String) values.get(i)); if (values.get(i).getClass().equals(Timestamp.class)) pstm.setTimestamp(i+1, (Timestamp) values.get(i)); if (values.get(i).getClass().equals(Date.class)) pstm.setDate(i+1, (Date) values.get(i)); if (values.get(i).getClass().equals(Double.class)) pstm.setDouble(i+1, (Double) values.get(i)); if (values.get(i).getClass().equals(Float.class)) pstm.setFloat(i+1, (Float) values.get(i)); } pstm.execute();标记的正上方。

我认为如果您在页面加载之前尝试访问元素，那么它将无效。

正如其他答案所指出的那样，请确保您已在页面的</body>部分中添加了jQuery。

动态添加和删除HTML元素不起作用

4 个答案: