如何在同一行中添加 2 个文本框，最多 10 行，并且可以删除递增的 ID？

Question

我正在从事一个必须完全在 HTML、JavaScript 和 jQuery 中完成的项目，因为我无法访问 Internet 或服务器。我需要添加 2 个文本框，它们一次出现在一行中，当单击 "Add More" 按钮时，它会添加另一行两个文本框，但在任何给定时间都不会超过 10 行。两个文本框必须共享不同的 ID，但在 ID 末尾具有相同的数值，因为这是我可以捕获文本框值的唯一方法。此外，我需要一个 "Remove" link 来单独删除每一行，以及一种在单击 "No" 单选按钮时删除整个组的方法。

我现在拥有它的方式，它几乎完成了所有这些，除了有一个大故障。如果用户单击任何一行上的 "Remove" link，然后决定单击 "No" 单选按钮，但又决定单击 "Yes" 单选按钮重新开始，当他们单击 "Add More" 按钮时，它将一次显示 2 行，而不是一次只显示一行。如果他们再次重复该过程，则单击 "Add More" 按钮时将一次显示 3 行。我能够确定，在重复该过程足够多次后，它似乎忽略了最大长度。

下面是我的代码：

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

<head>
  <title>Test</title>

  <style>
    .inp {
      width: 40%;
    }
    .remove {
      float: right;
      color: blue;
      font-size: 10px;
      text-decoration: underline;
      cursor: pointer;
      background: #FFF;
    }
  </style>

  <script>
    $(document).ready(function() {
      $('.test_list').hide();

      $('#test_yes').click(function() {
        $('.test_list').show();

        var test_max_fields = 10;
        var test_x = 0;
        $('#test_add').click(function(e) {
          e.preventDefault();
          if (test_x < test_max_fields) {
            test_x++;
            var inps = $('#test_wrapper >div:last').data('count') + 1 || 5;
            $('#test_wrapper').append('<div class="test" data-count="' + inps + '"><input type="text" name="test_textbox_1" id="test_textbox_1' + inps + '" class="inp"/> $<input type="text" name="test_textbox_2" id="test_textbox_2' + inps + '" class="inp"/><a class=remove>Remove</a><br><br></div>');
          } else {
            var inps = " ";
          }
        });

        $('#test_wrapper').on('click', 'a.remove', function() {
          $(this).closest('div').remove();
        });
      });

      $('#test_no').click(function() {
        $('.test').remove();
        $('.test_list').hide();
      });
    });
  </script>
</head>

<body>
  <table>
    <tr class="test_main">
      <td>
        Do you want to test this?
      </td>
      <td>
        <label>Yes</label>
        <input type="radio" name="test_check" id="test_yes" value="Yes">
        <label>No</label>
        <input type="radio" name="test_check" id="test_no" value="No">
      </td>
    </tr>
    <tr class="test_list" style="line-height:1em;">
      <td>
        Press the ADD MORE button
      </td>
      <td>
        Textbox 1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Textbox 2
      </td>
    </tr>
    <tr class="test_list" style="line-height:1em;">
      <td>
      </td>
      <td>
        <span id="test_wrapper">      
     </span>
      </td>
    </tr>
    <tr class="test_list">
      <td>
        &nbsp;
      </td>
      <td>
        <button id="test_add">Add More</button>
      </td>
    </tr>
    </tabel>
</body>

</html>

Answer 1

您必须减少计数器。它只会在我能看到的时候增加。

Answer 2

这是因为您在 test_yes 和 test_add 上有 click() 功能，每次单击是时都会复合。

每次单击是时，它都会在添加按钮上添加另一个事件，结果会添加更多文本框，但它只需要一个。你需要把它分开，这样它就不会这样做。另外，你可能想考虑制作一个fiddle，它确实花了我 30 秒。

编辑：

这是一个快速修复方法。用 class .loaded 标记它已加载，然后使用 :not(.loaded) 以确保它不会一遍又一遍地重新初始化您的点击功能。

工作示例： http://jsfiddle.net/7t8fgnrw/1/

老实说，这不是我会做的。我本来已经制作了表格，只需使用 yes/no 到 hide/show 就可以了。我不明白为什么你需要结合你的 yes/no 和 inputs/add/remove 的功能，因为它可以保持独立和模块化，因为所有代码都是通用的。

Answer 3

请测试以下 code.it 是否适合我

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!doctype html>

<head>
  <title>Test</title>

  <style>
    .inp {
      width: 40%;
    }
    .remove {
      float: right;
      color: blue;
      font-size: 10px;
      text-decoration: underline;
      cursor: pointer;
      background: #FFF;
    }
  </style>

  <script>
    $(document).ready(function() {
      $('.test_list').hide();


      $('#test_yes').click(function() {
        $('.test_list').show();
      });


      var test_max_fields = 10;
      test_x = 0;

      $('#test_add').click(function(e) {
        e.preventDefault();

        if (test_x < test_max_fields) {
          test_x++;
          var inps = $('#test_wrapper >div:last').data('count') + 1 || 5;
          $('#test_wrapper').append('<div class="test" data-count="' + inps + '"><input type="text" name="test_textbox_1" id="test_textbox_1' + inps + '" class="inp"/> $<input type="text" name="test_textbox_2" id="test_textbox_2' + inps + '" class="inp"/><a class=remove>Remove</a><br><br></div>');

        } else {
          var inps = "";
        }
      });

      $('#test_wrapper').on('click', 'a.remove', function() {
        $(this).closest('div').remove();
      });


      $('#test_no').click(function() {
        $('#test_wrapper').empty();
        $('.test_list').hide();
      });
    });
  </script>
</head>

<body>
  <table>
    <tr class="test_main">
      <td>
        Do you want to test this?
      </td>
      <td>
        <label>Yes</label>
        <input type="radio" name="test_check" id="test_yes" value="Yes">
        <label>No</label>
        <input type="radio" name="test_check" id="test_no" value="No">
      </td>
    </tr>
    <tr class="test_list" style="line-height:1em;">
      <td>
        Press the ADD MORE button
      </td>
      <td>
        Textbox 1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Textbox 2
      </td>
    </tr>
    <tr class="test_list" style="line-height:1em;">
      <td>
      </td>
      <td>
        <span id="test_wrapper">                        
                </span>
      </td>
    </tr>
    <tr class="test_list">
      <td>
        &nbsp;
      </td>
      <td>
        <button id="test_add">Add More</button>
      </td>
    </tr>
    </tabel>
</body>

</html>

如果您有任何疑问，请告诉我

谢谢

Answer 4

使用示例 -sagar umaretiya- 提供的，我能够弄清楚如何让它按照我想要的方式工作（请参阅我对 -sagar umaretiya- answer 的最后评论。下面是更新的工作代码正是我想要的一切。感谢所有帮助我为这个问题找到一个很好的工作解决方案的人。我知道这样做很混乱，因为我这样做的原因，以及我需要的功能的挑剔，但我感谢每个人的意见.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!doctype html>
<head>
  <title>Test</title>

  <style>
     .inp {
        width:40%;
    }

    .remove {
        float:right;
        color:blue;
        font-size:10px;
        text-decoration:underline;
        cursor:pointer;
        background:#FFF;
    }
  </style>

  <script>

     $(document).ready(function() {
        $('.test_list').hide();


        $('#test_yes').click(function(){
            $('.test_list').show();
        });


            var test_max_fields = 10;
            var test_x = 0;

            $('#test_add').click(function(e) {
               e.preventDefault();

                if(test_x < test_max_fields){
                    test_x++;
                    var inps = $('#test_wrapper >div:last').data('count')+1 || 0;
                    $('#test_wrapper').append('<div class="test" data-count="'+inps+'"><input type="text" name="test_textbox_1" id="test_textbox_1'+inps+'" class="inp"/> $<input type="text" name="test_textbox_2" id="test_textbox_2'+inps+'" class="inp"/><a class=remove>Remove</a><br><br></div>');

                }
                else {
                    var inps = "";
                }
            });

            $('#test_wrapper').on('click' , 'a.remove' ,function(){
                test_x--;
                $(this).closest('div').remove();
            });


        $('#test_no').click(function() {
            test_x = 0;
           $('#test_wrapper').empty();
            $('.test_list').hide();
        });
    });
  </script>
  </head>
  <body>
  <table>
    <tr class="test_main">
        <td>
            Do you want to test this?
        </td>
        <td>
            <label>Yes</label>
            <input type="radio" name="test_check" id="test_yes" value="Yes">
            <label>No</label>
            <input type="radio" name="test_check" id="test_no" value="No">
        </td>
    </tr>
    <tr class="test_list" style="line-height:1em;">
        <td>
            Press the ADD MORE button
        </td>
        <td>
            Textbox 1 &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; Textbox 2
        </td>
    </tr>
    <tr class="test_list" style="line-height:1em;">
        <td>
        </td>
        <td>
            <span id="test_wrapper">                        
            </span>
        </td>
    </tr>
    <tr class="test_list">
        <td>
            &nbsp;
        </td>
        <td>
            <button id="test_add">Add More</button>
        </td>
    </tr>
  </tabel>
  </body>
 </html>

如何在同一行中添加 2 个文本框，最多 10 行，并且可以删除递增的 ID？

How do I add 2 textboxes in the same with a max of 10 rows with incrementing IDs that I can remove?

html

javascript

jquery

textbox