jQuery addClass example

Change class name on click in jQuery

HTML

<body>
    <div class='container'>
        <div class='form-group'>
            <label for='msv'>Mã sinh viên
            <input type='text' class='msv' id='msv'>
            <p style="color:red;display:inline">(*)</p></label><br>
            <label for='hvt'>Họ và tên
            <input type='text' class='hvt' id='hvt'>
            <p style="color:red;display:inline">(*)</p></label><br>
            <label for='age'>Tuổi
            <input type='number' class='age' id='age'>
            <p style="color:red;display:inline">(*)</p></label><br>
            <label for='lop'>Lớp
            <input type='text' class='lop' id='lop'>
            <p style="color:red;display:inline">(*)</p></label><br>
            </div>
        
        <div class="but">
                <button class='btn btn-primary'>Thêm mới</button>
        </div><br>
        
        <table class="table table-bordered" >
            <thead>
                <tr>
                    <th>STT</th>
                    <th >Họ và tên</th>
                    <th >Mã sinh viên</th>
                    <th>Tuổi</th>
                    <th>Giới tính</th>
                    <th>Ngày sinh</th>
                    <th>Lớp</th>
                </tr>
            </thead>
            <tbody id='tbthongtin'>
                
            </tbody>
        </table>
        
        <div class="form-group">
            <label for='msv'>Mã sinh viên
            <input type='text' class='msv' id='sMsv'>
            </label>
            <label for='hvt'>Họ và tên
            <input type='text' class='hvt' id='sHvt'>
            </label>
        </div>
        <div class="but">
            <button class="btn btn-danger" id="search">Tìm kiếm</button>
        </div>
        
        <table class="table table-bordered">      
             <thead>
                <tr>
                    <th>STT</th>
                    <th >Họ và tên</th>
                    <th >Mã sinh viên</th>
                    <th>Tuổi</th>
           ...

JavaScript

$(document).ready(function (){
   
        var i =0;
        $('#search').click(()=>{
      
         	let inputMsv = $('#sMsv').val();
          let inputHvt = $('#sMsv').val();
        	let list = $('#tbthongtin').find('tr');
          list.each((i,n)=>{
          	let hvt = $(n).find('.hvt').html();
            let mvs = $(n).find('.msv').html();
                        
            if(inputMsv == mvs && inputHvt == hvt){
            	
            	$('#searchResult').html('');
            	$('#searchResult').append($(n).clone());
            }
          });
        });  
        
        
        $('.btn-primary').click(function (){
            var hvt = $('#hvt').val();
            var msv = $('#msv').val();
            var age = $('#age').val();
            var lop = $('#lop').val();
            
            if (hvt ==='' || age =='' ||  lop =='' || msv =='') {
                alert('Điền thông tin sinh viên')
            }
            else {
                
                ++i;
                
                $('#tbthongtin').append('<tr><td>' + i + '</td><td class="hvt">' + hvt + '</td><td class="msv">' + msv + '</td><td>' + age + '</td><td>giới tính</td><td> ngày sinh </td><td>' + lop + '</td></tr>');
            
                $('#hvt').val('');
                $('#msv').val('');
                $('#age').val('');
                $('#lop').val('');
            }
    
        $('.btn-danger').click(function(){
          
        });
        });
    });