Question

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

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

另一个问题是，我可以根据Up链接器上选择的选项来更改Lw链接器的值，但它仅在第一行起作用。当我添加第二行时，第二个Up链接器的值更改了第一个Lw链接器，而不是第二个。我也不知道该怎么解决。

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

上A-Lw B
上C-左D
向上D-Lw E
向上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

尝试通过更改您的addMore btn click监听器来尝试此操作

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

Answer 2

我已经更新了您的代码以执行您打算执行的操作，我相信它现在可以正常工作。让我知道您是否遇到任何问题。

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

Answer 3

在请求的第一部分尝试将此限制为7

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

如何限制我可以用jquery

3 个答案: