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

Question

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

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

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

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

1. 上 A - 左 B
2. 上 C - 左 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>

Answer 1

我已经更新了您的代码以执行您打算执行的操作，我相信它现在可以正常工作了。如果您遇到任何问题，请告诉我。

$(function () {
            $('#addMore').on('click', function () {
                last_index = $("#tb tr:last").attr("index");
                total_rows = $("#tb tr").length;
                if(total_rows > 7)
                    alert("you can not insert more than 7 rows");
                else    
                insertRow(Number(last_index) +1,"A","B");
            });
            $(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!");
                }
            });
        });      

        function insertRow(index, Up, Lw){

        row_Html =`<tr index = ${index}>
                    <td><input type="text" name="Name[]" class="form-control" style="width: 180px" maxlength="12"></td>
                    <td>
                        <select id="Up_${index}" name="Up[]" class="form-control" index = ${index}>
                            <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_${index}" name="Lw[]" class="form-control" index = ${index}>

                        </select>
                    </td>
                    <td>
                        <a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a>
                    </td>
                </tr>`;

        appended_row = $("#tb tbody").append(row_Html); 
        appended_row.find(`#Up_${index}`).val(Up);
        appended_row.find(`#Lw_${index}`).append(`<option value="${Lw}">${Lw}</option>`);
        appended_row.find("input").val('');

        }

        $(document).ready(function () {


            insertRow(1,"A","B");
            insertRow(2,"B","C");
            insertRow(3,"C","D");
            insertRow(4,"D","E");
 
            
            $("#tb").on('change', "select[id^='Up_']", function () {
                var val = $(this).val();
                var index = $(this).attr("index");
                if (val == "A") {
                    $(`#Lw_${index}`).html("<option value='B'>B</option>");
                } else if (val == "B") {
                    $(`#Lw_${index}`).html("<option value='C'>C</option>");
                } else if (val == "C") {
                    $(`#Lw_${index}`).html("<option value='D'>D</option>");
                } else if (val == "D") {
                    $(`#Lw_${index}`).html("<option value='E'>E</option>");
                } else if (val == "E") {
                    $(`#Lw_${index}`).html("<option value='F'>F</option>");
                } else if (val == "F") {
                    $(`#Lw_${index}`).html("<option value='G'>G</option>");
                } else if (val == "G") {
                    $(`#Lw_${index}`).html("<option value='A'>A</option>");
                }
            });
        });

<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">
            <thead>
                <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>
            </thead>
            <tbody>

            </tbody>
        </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>