Tạo nút tìm kiếm

MiiHaoo · February 21, 2019, 3:14pm

chào mọi người hiện em có bài tập là tạo giao diện quản lí sinh viên với framework nhưng đến đoạn tạo nút tìm kiếm một phần tử thì e không biết như nào mọi người góp ý giúp e với được không ạ. em cảm ơn ạ!

<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='msv'>
            </label>
            <label for='hvt'>Họ và tên
            <input type='text' class='hvt' id='hvt'>
            </label>
        </div>
        <div class="but">
            <button class="btn btn-danger">Tìm kiếm</button>
        </div>
        <table class="table table-bordered">      
            <thead>
        
            </thead>
            <tbody class='timkiem'>
            
            </tbody>
        </table>
    </div>
<script>
    $(document).ready(function (){
   
        var i =0;
        
        $('.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>' + hvt + '</td><td>' + 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(){
          
        });
        });
    });
</script>
    
</body>

anon12276517 · February 21, 2019, 3:06pm

Bạn có mẫu thiết kế bạn muốn ko ?

MiiHaoo · February 21, 2019, 3:08pm

mình muốn gõ tên và mã sẽ hiện thông tin sinh viên đó bên dưới

Twot_Leo_L2t · February 22, 2019, 2:19am

Chúng ta sẽ tìm kiếm theo cây DOM và vì có nhiều dòng nên không thể đặt tên theo id.
Vì vậy phải tìm kiếm bằng class của mỗi dòng sv được add vào.

thêm vào chỗ append của từng dòng sinh viên(sv) chỗ mã và họ tên như sau:

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

<td class="hvt">
<td class="msv">

đặt tên lại cho 2 trường search

 <input type='text' class='msv' id='sMsv'>
 <input type='text' class='hvt' id='sHvt'>

event click cho nút tìm kiếm:

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

full code:

https://jsfiddle.net/59zg6vLm/2/

MiiHaoo · February 22, 2019, 5:14pm

e cảm ơn a ạ. a nhiệt tình quá