javascript - 在“添加行”函数中将添加的行数限制为 10

Question

我在 java 脚本中有一个“添加行”功能。如何将添加的行数限制为不超过 10 行？这是我的代码。谢谢您的帮助！

$(document).on('click', '#addAddOnDay', function() {
    var rowCount = $('#addOnDay tr').length + 1;
    var rowClass = (rowCount % 2 != 0) ? 'rowOdd' : 'rowEven';
    $('#addOnDay').append('<tr class="'+ rowClass +'"> \
<td align="center"><input type="text" class="text" style="width: 99%;" /></td> \
<td align="center"><input type="radio" name="4a_1"> <label>Yes</label> &nbsp; <input type="radio" name="4a_1" checked> <label>No</label></td> \
<td align="center">20000 or 95%</td> \
<td align="center" class="rollUpDisplay">1</td> \
</tr>');
});

Answer 1

$(document).on('click','#addAddOnDay',function(){

                var rowCount = $('#addOnDay tr').length; // current number of rows
                if(rowCount >= 10) {
                        return ;
                        }
   // Rest of the code....

                    });

Answer 2

把它装进一个额外的条件

if( $('#addOnDay ').find('tr').length < 10) {

    // your code here
}

Answer 3

您可以在函数的开头添加一个检查已经存在多少行，如果它等于或大于 10，则退出：

if ($('#addOnDay tr').length >= 10)
    return;

实际上，由于您已经检查了进行斑马条纹的计数，因此只需添加一个额外的检查：

$(document).on('click','#addAddOnDay',function(){
    var rowCount = $('#addOnDay tr').length;
    if (rowCount >= 10)
        return false;
    var rowClass = (rowCount + 1) % 2 == 0 ? 'rowEven' : 'rowOdd';
    ...
});