HTML表格格式错误。 当元素应该垂直放置时，为什么要创建楼梯呢？

Question

I am creating a form which adds 2 textboxes on the click of "add material", one to represent a material, one for a URL.

When I click it however, it seems to make a staircase display, rather than a vertical, 2 row display. I'm new to Javascript, please help!

HTML/JS:

<form role="form" method="post">
                    <table>
                        <tr>
                            <td>
                                <label for="title">Project Title</label>
                                <input type="text" name="title" value="">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="description">Description</label>
                                <textarea name="description"></textarea>
                            </td>
                        </tr>
                    </table>
                    <table class="materialstab" style="border:1px solid;" cellpadding="5">
                        <script type="text/javascript">
                        jQuery(document).ready(function($){
                            $('.my-form .add-box').click(function(){
                                var n = $('.text-box').length + 1;

                                var box_html = $('<tr><td><p class="text-box"><input type="text" name="materials" value="" id="materials' + n + '" /></p></td><td><p class="text-box"> <input type="text" name="url' + n + '" value="" id="url' + n + '" /><a href="#" class="remove-box">Remove</a></p></td></tr>');
                                box_html.hide();
                                $('.my-form .materialstab p.text-box:last').after(box_html);
                                box_html.fadeIn('slow');
                                return false;
                            });
                            $('.my-form').on('click', '.remove-box', function(){
                                $(this).parent().css( 'background-color', '#FF6C6C' );
                                $(this).parent().fadeOut("slow", function() {
                                    $(this).remove();
                                    $('.box-number').each(function(index){
                                        $(this).text( index + 2 );
                                    });
                                });
                                return false;
                            });
                        });
                        $(document).ready( function () {

                            var nbtextbox = $('input[name="materials"]').length;
                            var box_2 = $('<input type="hidden" name="elem1" value="'+nbtextbox+'">');
                            $('.my-form p.text-box:last').after(box_2);

                       });
                        </script>
                        <tr>
                            <td>
                                <p class="text-box">
                                    <label for="materials">Materials</label>
                                </p>
                            </td>
                            <td>
                                <p class="text-box">
                                    <label for="url">URL</label>
                                    <a class="add-box" href="#">Add Material</a>
                                </p>
                            </td>
                        </tr>

                    </table>

Answer 1

To fix this, first of all move the <script> element outside the table. It doesn't need to be in there. Then add the class you're using to your <form> :

<form class="my-form" role="form" method="post">

Finally, change the selector in the 7th line of your script to

$('.my-form .materialstab tr:last')

 jQuery(document).ready(function() { $('.my-form .add-box').click(function() { var n = $('.text-box').length + 1; var box_html = $('<tr><td><p class="text-box"><input type="text" name="materials" value="" id="materials' + n + '" /></p></td><td><p class="text-box"> <input type="text" name="url' + n + '" value="" id="url' + n + '" /><a href="#" class="remove-box">Remove</a></p></td></tr>'); box_html.hide(); $('.my-form .materialstab tr:last').after(box_html); box_html.fadeIn('slow'); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="my-form" role="form" method="post"> <table class="materialstab" style="border:1px solid;" cellpadding="5"> <tr> <td> <p class="text-box"> <label for="materials">Materials</label> </p> </td> <td> <p class="text-box"> <label for="url">URL</label> <a class="add-box" href="#">Add Material</a> </p> </td> </tr> </table> </form> 

Answer 2

You want to add you new rows to the table, not the end of the previous row (inside the <tr> tag.)

$('.my-form .materialstab').append(box_html);

In the remove eventhandler you need to be doing your work on the <tr> element. this is bound to the <a> element.

$('.my-form').on('click', '.remove-box', function(){
    var $row = $(this).parents('tr');
    $row.css( 'background-color', '#FF6C6C' );
    $row.fadeOut("slow", function() {
        $row.remove();
        $('.box-number').each(function(index){
            $(this).text( index + 2 );
        });
    });
    return false;
});