Question

我正在创建一个表单，在单击＆＃34时添加2个文本框;添加材料＆＃34;，一个表示材料，一个表示URL。

当我点击它时，它似乎是一个楼梯显示器，而不是一个垂直的2排显示器。我是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>

Answer 1

要解决此问题，首先要将<script>元素移到表格之外。它不需要在那里。然后将您正在使用的课程添加到<form>：

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

最后，将脚本第7行中的选择器更改为

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

您想要向表中添加新行，而不是上一行的末尾（在<tr>标记内。）

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

在remove eventhandler中，您需要在<tr>元素上进行工作。 this绑定到<a>元素。

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

HTML表格格式错误。当元素应该垂直时，为什么元素会创建一个阶梯？

2 个答案: