JQuery-Динамический фокус на пустые строки таблицы

Question

У меня есть динамический datatable, который содержит AddRow button.On, нажав AddRow, создается новая строка. Перед созданием новой строки я хочу проверить, являются ли поля пустыми и если поля empty Я хочу сосредоточиться на пустом поле.

Все работает нормально, но проблема фокусировки не работает .. Вы, кажется

//Initializing datatable relation 
 
var InitRelationTable = function() { 
 

 
    var rowCount = $('#tblStudentRelation >tbody >tr').length; 
 

 
    //For firsttime addition of datatable   
 
    if (rowCount == 0) { 
 
    var $tbody = $("#tblStudentRelation tbody"); 
 
    $($tbody).html(''); 
 

 
    //Adds 5 rows to the datatable 
 
    for (var i = 0; i < 1; i++) { 
 

 
     var slno = parseInt(i + 1); 
 

 
     var $row = $('<tr/>'); 
 
     $row.append(' <td class="slno">' + slno + '</td>'); 
 
     $row.append(' <td><input name="StudentRelation[' + i + '].Name" type="text" class="form-control capitalise refName" placeholder="Name" /></td>'); 
 

 
     $row.append(' <td><input name="StudentRelation[' + i + '].Relation" type="text" class="form-control capitalise refRelation" placeholder="Relation" /></td>'); 
 

 
     $row.append(' <td><input name="StudentRelation[' + i + '].EmailId" type="text" class="form-control capitalise refEmailId" data-val="true" data-val-email="Invalid EmailId" placeholder="EmailId" />' + 
 
     '<span class="field-validation-valid" data-valmsg-for="StudentRelation[' + i + '].EmailId" data-valmsg-replace="true"></span></td>'); 
 

 
     $row.append(' <td><input name="StudentRelation[' + i + '].MobileNo" type="text" class="form-control numberOnly mobileValidate refMobile" data-val="true" placeholder="Contact No" /></td>'); 
 
     $tbody.append($row); 
 
    } 
 
    } else { 
 
    var slno = parseInt(rowCount + 1); 
 
    var i = parseInt(rowCount); 
 

 
    var $row = $('<tr/>'); 
 
    $row.append(' <td class="slno">' + slno + '</td>'); 
 
    $row.append(' <td><input name="StudentRelation[' + i + '].Name" type="text" class="form-control capitalise refName" placeholder="Name" /></td>'); 
 

 
    $row.append(' <td><input name="StudentRelation[' + i + '].Relation" type="text" class="form-control capitalise refRelation" placeholder="Relation" /></td>'); 
 

 
    $row.append(' <td><input name="StudentRelation[' + i + '].EmailId" type="text" class="form-control capitalise refEmailId" data-val="true" data-val-email="Invalid EmailId" placeholder="EmailId" />' + 
 
     '<span class="field-validation-valid" data-valmsg-for="StudentRelation[' + i + '].EmailId" data-valmsg-replace="true"></span></td>'); 
 

 
    $row.append(' <td><input name="StudentRelation[' + i + '].MobileNo" type="text" class="form-control numberOnly mobileValidate refMobile" data-val="true" placeholder="Contact No" /></td>'); 
 

 
    $row.append('<td><div class="tools"><a class="btn rowDelete"><i class="fa fa-trash-o " style="color:red"></i></a></div></td>'); 
 

 
    $("#tblStudentRelation tbody tr:last").after($row); 
 

 
    } 
 

 
} 
 

 
InitRelationTable() 
 

 
$(document).on("click", "#btnAddRow", function(e) { 
 

 
    if (ValidateReference()) { 
 
    InitRelationTable(); 
 
    } 
 

 
    return false; 
 

 
}); 
 

 
var ValidateReference = function() { 
 
    var validate = true; 
 
    $("#tblStudentRelation tbody tr").each(function(i, el) { 
 
    //Gets the reference name of each row 
 
    var $tdRefName = $(this).find('.refName'); 
 
    ///Gets the reference relation of each row 
 
    var $tdRefRelation = $(this).find('.refRelation'); 
 
    //Gets the reference mobile of each row 
 
    var $tdRefMobile = $(this).find('.refMobile'); 
 

 
    if ($tdRefName.val() == "") { 
 
     
 
     $tdRefName.focus(); 
 
     validate = false; 
 
     return false; 
 
    } else if ($tdRefRelation.val() == "") { 
 
    
 
     $tdRefRelation.focus(); 
 
     validate = false; 
 
     return false; 
 
    } else if ($tdRefMobile.val() == "") { 
 
     
 
     $tdRefMobile.focus(); 
 
     validate = false; 
 
     return false; 
 
    } 
 
    }); 
 
    return validate; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tblStudentRelation" class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>Name</th> 
 
     <th>Relation</th> 
 
     <th>EmailId</th> 
 
     <th>ContactNo</th> 
 

 

 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <th></th> 
 
     <th>Name</th> 
 
     <th>Relation</th> 
 
     <th>EmailId</th> 
 
     <th>ContactNo 
 
     <button type="button" id="btnAddRow" class="btn btn-sm btn-info pull-right "> 
 
      <i class="fa fa-plus"></i> 
 
      Add Row 
 
     </button> 
 
     </th> 
 

 

 
    </tr> 
 
    </tfoot> 
 
</table>

Answer 1

не будет рассмотрения данного дела по электронной почте. Когда я добавляю этот код, это отлично работает.

//Gets the reference name of each row 
var $tdRefName = $(this).find('.refName'); 
///Gets the reference relation of each row 
var $tdRefRelation = $(this).find('.refRelation'); 
//Gets the reference mobile of each row 
var $tdRefMobile = $(this).find('.refMobile'); 

var $tdRefEmailId = $(this).find('.refEmailId') 

if ($tdRefName.val() == "") { 

    $tdRefName.focus(); 
    validate = false; 
    return false; 

} else if ($tdRefEmailId.val() == "") { 

    $tdRefEmailId.focus(); 
    validate = false; 
    return false; 

} else if ($tdRefRelation.val() == "") { 

    $tdRefRelation.focus(); 
    validate = false; 
    return false; 
} else if ($tdRefMobile.val() == "") { 

    $tdRefMobile.focus(); 
    validate = false; 
    return false; 
} 

Но если вы хотите, чтобы очистить это немного можно заменить эту функцию:

var ValidateReference = function() { 
    var validate = true; 

    $("#tblStudentRelation tbody tr:last-child input").each(function(i, el) { 

    if($(el).val() == "") 
    { 
     $(el).focus(); 
     validate = false; 
     return false; 
    } 

    }); 
    return validate; 
} 

Снимите: селектор последнего ребенка, если вы хотите, чтобы проверить каждый вход.