-1

私はJavaScriptが初めてで、jqueryの経験はほとんどありません。以下により、複数の候補に対してフォームを繰り返すことができます。ほとんどは正常に機能しますが、次の選択リストを関連する行に添付するのに助けが必要であり、削除ボタンは現時点では各選択リストを削除しません:

   <html>
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script>
            (function($) {
                $newcountForms = 1;
                $.fn.newaddForms = function() {
                    var newform = "<table>" + "<tr>" + "<td>First Name: <input type='text' name='FirstName[" + $newcountForms + "]'></td>" + "<td>Last Name: <input type='text' name='LastName[" + $newcountForms + "]'></td>" + "<td>Sex:</td><td> <input type='radio' name='Sex[" + $newcountForms + "]' value='Male'>Male<br>" + "<input type='radio' name='Sex[" + $newcountForms + "]' value='Female'>Female</td>" + "<td><button>remove</button></td>" + "</tr>" + "</table>";

                    newform1 = $("<div>" + newform + "</div>");

                    $("button", $(newform1)).click(function() {
                        $(this).parent().parent().remove();
                    });

                    $(this).append(newform1);

                    var s = $('<select/>');
                    var o = [1, 2, 3];
                    for (var i in o) {
                        s.append($('<option/>').html(o[i]));
                    }
                    $("button", $(s)).click(function() {
                        $(this).parent().parent().remove();
                    });

                    $(this).append(s);

                    $newcountForms++;
                };
            })(jQuery);

            $(function() {
                $("#newbutton").bind("click", function() {
                    $("#newcands").newaddForms();
                });
            });

        </script>
     </head>
    <body>
        <!-- Button For New Candidates -->
        <button id="newbutton">
            New Candidate
        </button>

        <form>
            <p>
                <div id="newcands"></div>
            </p>
        </form>
    </body>
   </html>
4

1 に答える 1

0

このようにnewForm1にselectを追加します

+"<td><select>"+s.html()+"</select></td>"+

     $("button", $(newform1)).click(function () {
        $(this).closest('table').remove();
     });

デモ

于 2013-09-03T08:50:05.260 に答える