[__KUL__]

các bác chỉ giúp em với ạ. em có đề bài là
- Nhập thông tin sau đó click nút nhập thì có 1 dòng mới được thêm vào bảng ở dưới với cái thông tin được nhập vào ở trên và không có điểm trung bình.
- Click nút "tính điểm trung bình" thì cột điểm trung bình được điền vào.
- click nút "Xếp loại" thì những người có điểm trung bình >= 8 sẽ chuyển màu đỏ

[Chaien at IS]

thím hiểu được gì và làm được những gì rồi

[xshatter]

JS thuần (pure) hay dùng Framework (JQuery chẳng hạn) hả bạn?

[zzchaolegionzz]

Nhờ giúp chung chung vậy sao giúp được. Thím muốn hỏi cái gì? Và đề bài yêu cầu sử dụng công cụ nào? JS thuần + DOM, jquery, react...
Nếu thím dùng JS thuần thì từ khóa là Javascript, DOM, HTML DOM Style. Cứ search ngắn gọn để giải quyết từng cái 1
- Render DOM form, table, button...
- HTML form submit
- Edit DOM element
...
Goodluck.

[ThuyVyKhanh]

Lướt voz thấy bác cần nên quẩy tí.

Bác tạo file html rồi ném vào , có gì tự sửa theo ý bác ạ!

Trình còi mong các bác thông cảm

    
    	
    	Class Markshjt
        
            body {
                text-align: center;
            }
            label span {
                display: inline-block;
                width: 150px;
                font-weight: bold;
                text-align: left;
                cursor: pointer;
            }
            label input {
                width: 180px;
            }
            .item {
                margin-bottom: 20px;
            }
            .item.error {
                color: #FF0000;
            }
            .input.error {
                border-color: #FF0000;
            }
            .ketqua {
                text-align: center;
            }
            .kq {
                background-color: #F4F7F8;
                resize: horizontal;
                overflow: hidden;
                display: flex;
                margin: 1em;
            }
            .kq > * {
                margin: 0.5em;
                padding: 0.5em;
                min-width: 0;
                background-color: #FeFeFe;
                width: 17%;
            }
            .kq .stt {
                width: 7%;
            }
            .kq .hoten {
                width: 25%;
            }
            .kq.top {
                font-weight: bold;
            }
            .hocsinhgioi {
                color: #FF0000;
                font-weight: bold;
            }
        
    

	
        

          

            
Class Markshjt
            

              <span>Họ Tên:</span>
                
              
            
            

              <span>Điểm Toán:</span>
                
              
            
            

              <span>Điểm Lý:</span>
                
              
            
            

              <span>Điểm Hóa:</span>
                
              
            
            

            

              
            
          
        
        

          

            
STT
            
Họ Tên
            
Toán
            
Lý
            
Hóa
            
Trung Bình
          
        
        

          
          
        
        
            var form_bieumau1		= document.getElementById('bieumau1');
            var ds_ketqua			= document.getElementById('ketqua');
            var btn_nhap 			= document.getElementById('nhap');
            var btn_diemtrungbinh 	= document.getElementById('diemtrungbinh');
            var btn_hocsinhgioi 	= document.getElementById('hocsinhgioi');
            
            form_bieumau1.addEventListener('submit', function(evt){
                
                evt.preventDefault();
                
                var hoten 		= document.getElementById('hoten').value.trim();
                var diemtoan 	= document.getElementById('diemtoan').value;
                var diemly 		= document.getElementById('diemly').value;
                var diemhoa 	= document.getElementById('diemhoa').value;
                
                var ketqua = document.createElement('div');
                ketqua.setAttribute('class', 'kq diem');
                
                var cot = ['stt', 'hoten', 'toan', 'ly', 'hoa', 'tb'];
                
                cot.forEach(function(item){
                    
                    var div = document.createElement('div');
                    div.setAttribute('class', item);
                    
                    var textnode = document.createTextNode('');
                    
                    switch(item){
                        case 'stt':
                            textnode = document.createTextNode(ds_ketqua.querySelectorAll('.kq.diem').length+1);
                            break;
                            
                        case 'hoten':
                            textnode = document.createTextNode(hoten);
                            break;
                            
                        case 'toan':
                            textnode = document.createTextNode(diemtoan);
                            div.setAttribute('data-point', diemtoan);
                            break;
                            
                        case 'ly':
                            textnode = document.createTextNode(diemly);
                            div.setAttribute('data-point', diemly);
                            break;
                            
                        case 'hoa':
                            textnode = document.createTextNode(diemhoa);
                            div.setAttribute('data-point', diemhoa);
                            break;				
                    }	
                    
                    div.appendChild(textnode);
                    ketqua.appendChild(div);
                });
                
                ds_ketqua.appendChild(ketqua);
                
                this.reset();
                
                return false;			
            });
            
            btn_diemtrungbinh.addEventListener('click', function(evt){
                            
                ds_ketqua.querySelectorAll('.kq.diem').forEach(function(elm){				
                    diemtrungbinh = ( Number(elm.getElementsByClassName('toan')[0].getAttribute('data-point')) + Number(elm.getElementsByClassName('ly')[0].getAttribute('data-point')) + Number(elm.getElementsByClassName('hoa')[0].getAttribute('data-point')) ) / 3;
                    diemtrungbinh = diemtrungbinh.toFixed(1);
                    
                    elm.setAttribute('data-tb', diemtrungbinh);
                    elm.getElementsByClassName('tb')[0].innerHTML = diemtrungbinh;
                    elm.getElementsByClassName('tb')[0].setAttribute('data-point', diemtrungbinh);
                });
                
                return false;
            });
            
            btn_hocsinhgioi.addEventListener('click', function(evt){
                ds_ketqua.querySelectorAll('.kq.diem').forEach(function(elm){
                    if(Number(elm.getAttribute('data-tb')) &gt;= 8){
                        elm.classList.add('hocsinhgioi');
                    }else{
                        elm.classList.remove('hocsinhgioi');
                    }
                });
                
                return false;
            });