时间戳

首页 > 解决方案 > 如何限制我可以用jquery动态添加的表行数

javascript - 如何限制我可以用jquery动态添加的表行数

问题描述

我是 jQuery 的初学者。我正在创建一个表单，允许我同时注册多个名称和链接器的信息。在询问名称后，我还使用选择询问“链接器”的信息。如果 Up 链接器是 A，Lw 链接器应该是 B，依此类推，直到 Up Linker 是 G，此时 LW 应该是 A。因此，我需要将人们可以添加的行数限制为 7。

目前我的代码允许人们添加任意数量的行。我不知道如何限制可以添加的行数。

另一个问题是我可以使 Lw 链接器值根据 Up 链接器上选择的选项进行更改，但它仅适用于第一行。当我添加第二行时，第二个 Up 链接器的值会更改第一个 Lw 链接器而不是第二个。我也不知道如何解决。

理想情况下，我希望有一个表单，默认情况下，已经有 4 行等待使用以下链接器注册名称（因为我建议他们填写这四个）

  1. 上 A - 下 B
  2. 向上 C - Lw D
  3. 向上 D - Lw E
  4. 向上 G - Lw A

如果人们还没有准备好注册这 4 个，他们可以删除他们没有的那些，如果他们想用缺少的链接器注册其他人，他们可以按添加按钮并选择他们需要的链接器。他们应该能够注册多达 7 个名称，但链接器应该只使用一次。

非常感谢您能帮助解释我所缺少的内容。

这是我的代码

<link  rel="stylesheet" type="text/css"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<form action="100K-5F_action_page_search.php" method="get">
<table  class="table table-hover small-text" id="tb">
<tr class="tr-header">
<th>Name</th>
<th>Up</th>
<th>Lw</th>
<th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Features"><span class="glyphicon glyphicon-plus"></span></a></th>
<tr>
<td><input type="text" name="Name[]" class="form-control" style="width: 180px" maxlength="12"></td>
<td><select id ="Up" name="Up[]" class="form-control">
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
</select></td>
<td><select id ="Lw"name="Lw[]" class="form-control">
    <option value="B">B</option>
</select></td>
<td><a href='javascript:void(0);'  class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script>
$(function(){
    $('#addMore').on('click', function() {
          var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
          data.find("input").val('');
     });
     $(document).on('click', '.remove', function() {
         var trIndex = $(this).closest("tr").index();
           if(trIndex>1) {
             $(this).closest("tr").remove();
           } else {
             alert("Sorry!! Can't remove first row!");
           }
      });
});      
</script>
<script>
    $(document).ready(function () {
        $("#Up").change(function () {
            var val = $(this).val();
            if (val == "A") {
                $("#Lw").html("<option value='B'>B</option>");
            } else if (val == "B") {
                $("#Lw").html("<option value='C'>C</option>");
            } else if (val == "C") {
                $("#Lw").html("<option value='D'>D</option>");
            } else if (val == "D") {
                $("#Lw").html("<option value='E'>E</option>");
            } else if (val == "E") {
                $("#Lw").html("<option value='F'>F</option>");
            } else if (val == "F") {
                $("#Lw").html("<option value='G'>G</option>");
            } else if (val == "G") {
                $("#Lw").html("<option value='A'>A</option>");
            }
        });
    });
</script>


 

$(function(){
    $('#addMore').on('click', function() {
              var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
              data.find("input").val('');
     });
     $(document).on('click', '.remove', function() {
         var trIndex = $(this).closest("tr").index();
            if(trIndex>1) {
             $(this).closest("tr").remove();
           } else {
             alert("Sorry!! Can't remove first row!");
           }
      });
});      


    $(document).ready(function () {
        $("#Up").change(function () {
            var val = $(this).val();
            if (val == "A") {
                $("#Lw").html("<option value='B'>B</option>");
            } else if (val == "B") {
                $("#Lw").html("<option value='C'>C</option>");
            } else if (val == "C") {
                $("#Lw").html("<option value='D'>D</option>");
            } else if (val == "D") {
                $("#Lw").html("<option value='E'>E</option>");
            } else if (val == "E") {
                $("#Lw").html("<option value='F'>F</option>");
            } else if (val == "F") {
                $("#Lw").html("<option value='G'>G</option>");
            } else if (val == "G") {
                $("#Lw").html("<option value='A'>A</option>");
            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link  rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<form action="100K-5F_action_page_search.php" method="get">
<table  class="table table-hover small-text" id="tb">
<tr class="tr-header">
<th>Name</th>
<th>Up</th>
<th>Lw</th>
<th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Features"><span class="glyphicon glyphicon-plus"></span></a></th>
<tr>
<td><input type="text" name="Name[]" class="form-control" style="width: 180px" maxlength="12"></td>
<td><select id ="Up" name="Up[]" class="form-control">
	<option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
</select></td>
<td><select id ="Lw"name="Lw[]" class="form-control">
    <option value="B">B</option>
</select></td>
<td><a href='javascript:void(0);'  class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>

标签： javascriptjquery

解决方案

通过像这样更改您的 addMore btn 点击侦听器来尝试此操作

$('#addMore').on('click', function() {
    var nb_rows = $('form table tr:not(.tr-header)').length;
    
    if(nb_rows < 7){ // add row
      var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
      data.find("input").val('');
    }
    else//alert
    {
      alert("You can not add new row")
    }
    
});

推荐阅读