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

我正在创建一个表单，在单击“添加材料”时添加两个文本框，一个表示材料，一个表示URL

但是，当我单击它时，它似乎是一个楼梯显示，而不是一个垂直的两行显示。我是Javascript新手，请帮忙

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>

项目名称
描述
jQuery（文档）.ready（函数（$）{
$（'.my form.add box'）。单击（函数（）{
var n=$（'.text box'）。长度+1；
var-box_html=$（'
）；
box_html.hide（）；
$（'.my form.materialstab p.text-box:last'）。在（box_html）之后；
box_html.fadeIn（'slow'）；
返回false；
});
$（'.my form'）。在（'单击'，'.remove box'，函数（）上{
$（this.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+2）；
});
});
返回false；
});
});
$（文档）.ready（函数（）{
var nbtextbox=$（'input[name=“materials”]'）。长度；
变量框2=$（''）；
$（'.my form p.text-box:last'）。在（框2）之后；
});

材料


统一资源定位地址

要解决此问题，首先将

元素移到表外。它不需要在里面。 然后将您正在使用的类添加到您的

：

jQuery（文档）.ready（函数（）{
$（'.my form.add box'）。单击（函数（）{
var n=$（'.text box'）。长度+1；
var-box_html=$（'
）；
box_html.hide（）；
$（'.my-form.materialstab tr:last'）。在（框_html）之后；
box_html.fadeIn（'slow'）；
返回false；
});
});


材料


统一资源定位地址

您希望向表中添加新行，而不是上一行的末尾（在
标记内）

$（'.my form.materialstab'）.append（box\u html）

在remove eventhandler中，您需要对
元素进行操作
此
绑定到
元素

$('.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;
});

在
内部的
之后插入
（与上一个
之后的插入相反）
$('.my-form .materialstab tr:last')

$('.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;
});