表中添加行的JQuery事件处理程序形式-未触发事件的添加行

Question

我有一个表格，其中大多数单元格作为表单的输入。此版本用于查找平均信息。加载页面后，默认的学生会加载其成绩。学生单元具有class =“ student”的类，即使新添加的行也具有相同的class =“ student”。

存在一个具有某些默认值的对象。我已经编写了一些代码，[[应该（我认为）来侦听学生输入是否已更改，如果已更改，则……将其余各列更新为正确的信息。这适用于已加载的原始学生，但如果要添加其他学生，则不适用于添加的行。

// Assigning the variables with values given by user
const generic_profile= 'Q1' 


 

// Students you have

let students = {
  'Cindy'   : {age: 9,     m1:80,  m2:90, s1:90 , s2:100},
  'Mark'    : {age: 12,    m1:80,  m2:90, s1:90 , s2:100},
  'Jeff'    : {age: 8,     m1:90,  m2:90, s1:90 , s2:95},
  'Ann'     : {age: 11,    m1:90,  m2:60, s1:90 , s2:100},
  'Jason'   : {age: 5,     m1:95,  m2:30, s1:90 , s2:185},
  'Harvey'  : {age: 10,    m1:100, m2:70, s1:90 , s2:100},
  'Mike'    : {age: 9,     m1:100, m2:80, s1:90 , s2:82},
  'Ross'    : {age: 9,     m1:88,  m2:90, s1:90 , s2:100}
}




//Populates defaultClass dictionary
const defaultClass= (profile) =>{   
    
    // Q1, Q2 or Q3 was elected default loads will auto populate
    if ( profile === "Q1" ){
        let default_loads = ['Cindy' , 'Harvey', 'Mark']            
        return default_loads

    } else if (profile === "Q2") {
        let default_loads = ['Ann', 'Jason' , 'Ross', 'Mark']
        return default_loads
            
    } else if (profile === "Q3") {
        let default_loads = ['Ann', 'Harvey' , 'Jeff', 'Mark']
        return default_loads
        }else {
            return 0
    }
}





// Create Datalist HTML for options
 const dataList =(main_dict) =>{
    var datalist_1 = '<datalist id="student_list">'
    let datalist_2 = ''
    var datalist_3 = '</datalist>'
    
     for (var student in main_dict){
         let temp ='<option value="' + student + '"></option>'
         datalist_2 +=  temp 
     }
     var datalist_final = datalist_1 + datalist_2 + datalist_3
     return datalist_final
    }





//TABLE - DEFAULT RESULTS TO TABLE

const addDefaultToRow =(student_list, datalist_options) =>{
  //Find the table element
  var table = document.getElementById('grade-results')

  // Should alwasys have some values, double checks that it isn't zero. 
  if(student_list.length > 0){
    
    let i= 0
    
    for (let student in student_list){
    //Create an empty ROW <tr> element and add it to the 1st position of the table
    var row = table.insertRow(i);
    

    // Insert new cells (<td> elements) at the 1st-4th column
    var col1 = row.insertCell(0)
    var col2 = row.insertCell(1)
    var col3 = row.insertCell(2)
    var col4 = row.insertCell(3)
    var col5 = row.insertCell(4)
    var col6 = row.insertCell(5)

    //Add the values to the new cells  
        col1.innerHTML = '<input type="text" list="student_list"   class="student"   name="student" value="'  + [student_list[student]] + '">'  +datalist_options
        col2.innerHTML = '<input type="number" list="student_list" class ="age"    name="age" value="'  + students[student_list[student]].age  + '">' 
        col3.innerHTML = '<input type="number" list="student_list" class ="m1"  name="m1" value="'  + students[student_list[student]].m1  + '">'
        col4.innerHTML = '<input type="number" list="student_list" class ="m2"   name="m2" value="'  + students[student_list[student]].m2  + '">'
        col5.innerHTML = '<input type="number" list="student_list" class ="s1"    name="s1" value="'  + students[student_list[student]].s1 + '">'
        col6.innerHTML = '<input type="number" list="student_list" class ="s2"  name="s2" value="'  + students[student_list[student]].s2  + '">'

        i++

    }    
  } 


     //Add Totals Row
     var current_length = document.getElementById("grade-results").rows.length
     var row = table.insertRow(current_length)
    // Insert new cells (<td> elements) at the 1st-6th column
     var col1 = row.insertCell(0)
     var col2 = row.insertCell(1)
     var col3 = row.insertCell(2)
     var col4 = row.insertCell(3)
     var col5 = row.insertCell(4)
     var col6 = row.insertCell(5)
     //Add the values to the new cells  
     col1.innerHTML = 'Average Age'
     col2.innerHTML = 0
     col3.innerHTML = 'Average Math Score';
     col4.innerHTML = 0
     col5.innerHTML = 'Average Science Score';
     col6.innerHTML = 0;  

     present_totals(calculateSum())
}




//User wants to add another row
function addRows() {

    var table = document.getElementById("grade-results")
    let i = document.getElementById("grade-results").rows.length

    var row = table.insertRow(i-1)
    col1 = row.insertCell(0),
    col2 = row.insertCell(1)
    col3 = row.insertCell(2);
    col4 = row.insertCell(3);
    col5 = row.insertCell(4);
    col6 = row.insertCell(5);

    col1.innerHTML = '<input type="text"   list="student_list"  class="student"   name="student" value = "">'  + dataList(students);
    col2.innerHTML = '<input type="number" list="student_list"  class ="age"    name="age"      value="0">';
    col3.innerHTML = '<input type="number" list="student_list" class ="m1"  name="m1"    value="0">';
    col4.innerHTML = '<input type="number" list="student_list"  class ="m2"   name="m2"     value="0">';
    col5.innerHTML = '<input type="number" list="student_list"  class ="s1"    name="s1"      value="0">';
    col6.innerHTML = '<input type="number" list="student_list"  class ="s2"  name="s2"    value="0">';    

    $(document).ready(function(){

        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $("input").each(function() {

            $(this).keyup(function(){
                present_totals(calculateSum());
            }).click(function(){
                present_totals(calculateSum())
            });
        });
    });
}





//Everytime a click or keyup happens on the table, it updates the totals at the bottom 
  $(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $("input").each(function() {

        $(this).keyup(function(){
            present_totals(calculateSum());
        }).click(function(){
            present_totals(calculateSum())
      });;
   });
});




//Everytime a click or keyup happens on the Student, it updates the presets if it exists in our dictionary/object
$(document).ready(function(){
  //handler to trigger if student is changed
    $('input[class="student"]').change(function(){   
        console.log("CHANGE")
        console.log($(this))
        console.log($(this).context.value) 
        var rowSelected = $(this).context.parentElement.parentElement.cells
        var student = $(this).context.value
        // Iterates through each cloumn on changed Student Cell and updates it to presets  i is index that it is iterating and tr is var for the element
       $.each(rowSelected, function(i, tr){
           // It will not update i=0 which is the Student Name that has been selected or changed
            if(i>0){
                if(student in students){
                    var autoFill = [student, students[student].age, students[student].m1, students[student].m2, students[student].s1, students[student].s2 ]
                    var classNameList=  ["student" ,"age", "m1", "m2", "s1", "s2"]
                    tr.innerHTML = '<input type="number" list="student_list" class ="' + classNameList[i] + '"  name="' + classNameList[i] + '" value="'  +autoFill[i]  + '">'
                    console.log(tr)
               }
            }
        });
    });
});




// Adds up all the age, Maths and Science
var calculateSum = () => {

    var table = document.getElementById("grade-results")
    let length_table = document.getElementById("grade-results").rows.length-1
    
    var avg_age = 0;
    var avg_math = 0;
    var  avg_sci  =0;

    var age_array = []
    var m1_array = []
    var m2_array = []
    var s1_array = []
    var s2_array = []
    
    //Use arrays along with index to do the calculations, lets create the arrays first [probably a better way to do this (room for improvement)]
    //iterate through each **Age* and add the values to the array for later calculation
    $(".age").each(function() {
        age =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(age) && age.length!=0) {
            // iterate through each power and multiply and add
            age_array.push(age);
        }else{
            age_array.push(0)
        }
    });

     //iterate through each *MAth 1* and add the values to the array for later calculation
     $(".m1").each(function() {
        m1 =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(m1) && m1.length!=0) {
            // iterate through each power and multiply and add
            m1_array.push(m1);
        }else{
            m1_array.push(0)
        }
    }); 

     //iterate through each *MAth 2* and add the values to the array for later calculation
     $(".m2").each(function() {
        m2 =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(m2) && m2.length!=0) {
            // iterate through each power and multiply and add
            m2_array.push(m2);
        }else{
            m2_array.push(0)
        }
    }); 


     //iterate through each *Sciende 1* and add the values to the array for later calculation
     $(".s1").each(function() {
        s1 =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(s1) && s1.length!=0) {
            // iterate through each power and multiply and add
            s1_array.push(s1);
        }else{
            s1_array.push(0)
        }
    });  

     //iterate through each *Science 2* and add the values to the array for later calculation
     $(".s2").each(function() {
        s2 =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(s2) && s2.length!=0) {
            // iterate through each power and multiply and add
            s2_array.push(s2);
        }else{
            s2_array.push(0)
        }
    });  
    

    for (var index = 0; index < (length_table); index++){        
       avg_age += age_array[index]
       avg_math +=  m1_array[index] + m2_array[index] 
       avg_sci += s1_array[index] + s2_array[index] 
    }

    avg_age /= age_array.length
    avg_math /= (2* m1_array.length)
    avg_sci /= (2* s1_array.length)


    return [avg_age, avg_math, avg_sci]
    
}





// Add totals at bottom of table
var present_totals =(arr) =>{
    age= arr[0]
    math= arr[1]
    science = arr[2]
  
    var table = document.getElementById("grade-results")
    let i = document.getElementById("grade-results").rows.length
    
    var row = table.rows[i-1]
    
    col1 = row.cells[0], 
    col2 = row.cells[1]
    col3 = row.cells[2];
    col4 = row.cells[3];
    col5 = row.cells[4];
    col6 = row.cells[5];
  
    //col1.innerHTML = "Avg Age"
    col2.innerHTML =  '<input type="number" list="student_list"  class ="power_totals" name="power_totals" value="'  + age.toFixed(1)  + '">' 
    //col3.innerHTML = "Avg Math"
    col4.innerHTML = '<input type="number" list="student_list"  class ="surge_totals" name="surge_totals" value="'  + math.toFixed(1)  + '">'
    //col5.innerHTML = "Avg Science"
    col6.innerHTML =  '<input type="number" list="student_list" class ="energy_totals" name="energy_totals" value="'  + science.toFixed(1)  + '">'
}










const main =() =>{   
    var student_list = defaultClass(generic_profile)    
    var datalist_options = dataList(students)
    addDefaultToRow(student_list, datalist_options)
     
}

main();

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <title>Class</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="test.js" defer></script>  
  </head>



  <body>

    <header>
      <nav class="container">
      </nav> 
    </header>
    
    <section id="top">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2pprOx6E7ru4w3U0GoHbI9ZMAFHdsS2izq-cNToqaPmLRjbbs" alt="Students">
    </section>

    <section id="main">
      <!--Loads Table-->
      <h1>Calculate average Age<br> Average Scores:</h1>
      <br>
      <p><button onclick="addRows()">Add a new row</button></p> 
      <form action = "test.html" method = "GET">
        <table>
          <!--Form for Application Selection-->
          <thead>
            <tr>
                <th> Name</th>
                <th>Age</th>
                <th>Math Score 1</th>
                <th>Math Score 2</th>
                <th>Science Score 1</th>
                <th>Science Score 2</th>
            </tr>
          </thead>
          <tbody id="grade-results">
          </tbody> 
        </table>
        <br>
        <hr>
        <br>
        <br>
        <br>
        <br>
    


          <input type= "submit" value="Blah Blah ....">
      </form>
      <hr>
    </section>
    
  </body>



</html>

Answer 1

我一路上发现了一些错误。我也找到了解决我原始问题的解决方案，也许其他有更多专业知识的人可以解释$（document）.ready，为什么它看不到添加的行，而只看到原始行。我将.change（）函数复制到添加的rows函数中，希望新的$（document）.ready可以看到具有“ students”类的新行并监视其更改，而不仅仅是原始行。这似乎有效！

这是我的解决方案。

// Assigning the variables with values given by user
const generic_profile= 'Q1' 


 

// Students you have

let students = {
  'Cindy'   : {age: 9,     m1:80,  m2:90, s1:90 , s2:100},
  'Mark'    : {age: 12,    m1:80,  m2:90, s1:90 , s2:100},
  'Jeff'    : {age: 8,     m1:90,  m2:90, s1:90 , s2:95},
  'Ann'     : {age: 11,    m1:90,  m2:60, s1:90 , s2:100},
  'Jason'   : {age: 5,     m1:95,  m2:30, s1:90 , s2:185},
  'Harvey'  : {age: 10,    m1:100, m2:70, s1:90 , s2:100},
  'Mike'    : {age: 9,     m1:100, m2:80, s1:90 , s2:82},
  'Ross'    : {age: 9,     m1:88,  m2:90, s1:90 , s2:100}
}




//Populates defaultClass dictionary
const defaultClass= (profile) =>{   
    
    // Q1, Q2 or Q3 was elected default loads will auto populate
    if ( profile === "Q1" ){
        let default_loads = ['Cindy' , 'Harvey', 'Mark']            
        return default_loads

    } else if (profile === "Q2") {
        let default_loads = ['Ann', 'Jason' , 'Ross', 'Mark']
        return default_loads
            
    } else if (profile === "Q3") {
        let default_loads = ['Ann', 'Harvey' , 'Jeff', 'Mark']
        return default_loads
        }else {
            return 0
    }
}





// Create Datalist HTML for options
 const dataList =(main_dict) =>{
    var datalist_1 = '<datalist id="student_list">'
    let datalist_2 = ''
    var datalist_3 = '</datalist>'
    
     for (var student in main_dict){
         let temp ='<option value="' + student + '"></option>'
         datalist_2 +=  temp 
     }
     var datalist_final = datalist_1 + datalist_2 + datalist_3
     return datalist_final
    }





//TABLE - DEFAULT RESULTS TO TABLE

const addDefaultToRow =(student_list, datalist_options) =>{
  //Find the table element
  var table = document.getElementById('grade-results')

  // Should alwasys have some values, double checks that it isn't zero. 
  if(student_list.length > 0){
    
    let i= 0
    
    for (let student in student_list){
    //Create an empty ROW <tr> element and add it to the 1st position of the table
    var row = table.insertRow(i);
    

    // Insert new cells (<td> elements) at the 1st-4th column
    var col1 = row.insertCell(0)
    var col2 = row.insertCell(1)
    var col3 = row.insertCell(2)
    var col4 = row.insertCell(3)
    var col5 = row.insertCell(4)
    var col6 = row.insertCell(5)

    //Add the values to the new cells  
        col1.innerHTML = '<input type="text" list="student_list"   class="student"   name="student" value="'  + [student_list[student]] + '">'  +datalist_options
        col2.innerHTML = '<input type="number"  class ="age"    name="age" value="'  + students[student_list[student]].age  + '">' 
        col3.innerHTML = '<input type="number"  class ="m1"  name="m1" value="'  + students[student_list[student]].m1  + '">'
        col4.innerHTML = '<input type="number"  class ="m2"   name="m2" value="'  + students[student_list[student]].m2  + '">'
        col5.innerHTML = '<input type="number"  class ="s1"    name="s1" value="'  + students[student_list[student]].s1 + '">'
        col6.innerHTML = '<input type="number"  class ="s2"  name="s2" value="'  + students[student_list[student]].s2  + '">'

        i++

    }    
  } 


     //Add Totals Row
     var current_length = document.getElementById("grade-results").rows.length
     var row = table.insertRow(current_length)
    // Insert new cells (<td> elements) at the 1st-6th column
     var col1 = row.insertCell(0)
     var col2 = row.insertCell(1)
     var col3 = row.insertCell(2)
     var col4 = row.insertCell(3)
     var col5 = row.insertCell(4)
     var col6 = row.insertCell(5)
     //Add the values to the new cells  
     col1.innerHTML = 'Average Age'
     col2.innerHTML = 0
     col3.innerHTML = 'Average Math Score';
     col4.innerHTML = 0
     col5.innerHTML = 'Average Science Score';
     col6.innerHTML = 0;  

     present_totals(calculateSum())
}




//User wants to add another row
function addRows() {

    var table = document.getElementById("grade-results")
    let i = document.getElementById("grade-results").rows.length

    var row = table.insertRow(i-1)
    col1 = row.insertCell(0),
    col2 = row.insertCell(1)
    col3 = row.insertCell(2);
    col4 = row.insertCell(3);
    col5 = row.insertCell(4);
    col6 = row.insertCell(5);

    col1.innerHTML = '<input type="text"   list="student_list"  class="student"   name="student" value = "">'  + dataList(students);
    col2.innerHTML = '<input type="number"  class ="age"    name="age"      value="0">';
    col3.innerHTML = '<input type="number"  class ="m1"  name="m1"    value="0">';
    col4.innerHTML = '<input type="number"   class ="m2"   name="m2"     value="0">';
    col5.innerHTML = '<input type="number"  class ="s1"    name="s1"      value="0">';
    col6.innerHTML = '<input type="number"  class ="s2"  name="s2"    value="0">';    

    $(document).ready(function(){

        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $("input").each(function() {

            $(this).keyup(function(){
                present_totals(calculateSum());
            }).click(function(){
                present_totals(calculateSum())
            });
        });
    });

    //Everytime a click or keyup happens on the Student, it updates the presets if it exists in our dictionary/object
$(document).ready(function(){
    //handler to trigger if student is changed
      $(".student").change(function(){   
          console.log("CHANGE")
          console.log($(this))
          console.log($(this)[0].value)
          var rowSelected = $(this)[0].parentElement.parentElement.cells
          var student = $(this).val()
          console.log(student)
          // Iterates through each cloumn on changed Student Cell and updates it to presets  i is index that it is iterating and tr is var for the element
         $.each(rowSelected, function(i, tr){
             // It will not update i=0 which is the Student Name that has been selected or changed
              if(i>0){
                  if(student in students){
                      var autoFill = [student, students[student].age, students[student].m1, students[student].m2, students[student].s1, students[student].s2 ]
                      var classNameList=  ["student" ,"age", "m1", "m2", "s1", "s2"]
                      tr.innerHTML = '<input type="number" list="student_list" class ="' + classNameList[i] + '"  name="' + classNameList[i] + '" value="'  +autoFill[i]  + '">'
                      console.log(tr)
                 }
              }
          });
      });
  });
}





//Everytime a click or keyup happens on the table, it updates the totals at the bottom 
  $(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $("input").each(function() {

        $(this).keyup(function(){
            present_totals(calculateSum());
        }).click(function(){
            present_totals(calculateSum())
      });;
   });
});




//Everytime a click or keyup happens on the Student, it updates the presets if it exists in our dictionary/object
$(document).ready(function(){
  //handler to trigger if student is changed
    $(".student").change(function(){   
        console.log("CHANGE")
        console.log($(this))
        console.log($(this)[0].value)
        var rowSelected = $(this)[0].parentElement.parentElement.cells
        var student = $(this).val()
        console.log(student)
        // Iterates through each cloumn on changed Student Cell and updates it to presets  i is index that it is iterating and tr is var for the element
       $.each(rowSelected, function(i, tr){
           // It will not update i=0 which is the Student Name that has been selected or changed
            if(i>0){
                if(student in students){
                    var autoFill = [student, students[student].age, students[student].m1, students[student].m2, students[student].s1, students[student].s2 ]
                    var classNameList=  ["student" ,"age", "m1", "m2", "s1", "s2"]
                    tr.innerHTML = '<input type="number" list="student_list" class ="' + classNameList[i] + '"  name="' + classNameList[i] + '" value="'  +autoFill[i]  + '">'
                    console.log(tr)
               }
            }
        });
    });
});




// Adds up all the age, Maths and Science
var calculateSum = () => {

    var table = document.getElementById("grade-results")
    let length_table = document.getElementById("grade-results").rows.length-1
    
    var avg_age = 0;
    var avg_math = 0;
    var  avg_sci  =0;

    var age_array = []
    var m1_array = []
    var m2_array = []
    var s1_array = []
    var s2_array = []
    
    //Use arrays along with index to do the calculations, lets create the arrays first [probably a better way to do this (room for improvement)]
    //iterate through each **Age* and add the values to the array for later calculation
    $(".age").each(function() {
        age =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(age) && age.length!=0) {
            // iterate through each power and multiply and add
            age_array.push(age);
        }else{
            age_array.push(0)
        }
    });

     //iterate through each *MAth 1* and add the values to the array for later calculation
     $(".m1").each(function() {
        m1 =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(m1) && m1.length!=0) {
            // iterate through each power and multiply and add
            m1_array.push(m1);
        }else{
            m1_array.push(0)
        }
    }); 

     //iterate through each *MAth 2* and add the values to the array for later calculation
     $(".m2").each(function() {
        m2 =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(m2) && m2.length!=0) {
            // iterate through each power and multiply and add
            m2_array.push(m2);
        }else{
            m2_array.push(0)
        }
    }); 


     //iterate through each *Sciende 1* and add the values to the array for later calculation
     $(".s1").each(function() {
        s1 =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(s1) && s1.length!=0) {
            // iterate through each power and multiply and add
            s1_array.push(s1);
        }else{
            s1_array.push(0)
        }
    });  

     //iterate through each *Science 2* and add the values to the array for later calculation
     $(".s2").each(function() {
        s2 =parseInt(this.value)
        //Use if only if the value is number
        if(!isNaN(s2) && s2.length!=0) {
            // iterate through each power and multiply and add
            s2_array.push(s2);
        }else{
            s2_array.push(0)
        }
    });  
    

    for (var index = 0; index < (length_table); index++){        
       avg_age += age_array[index]
       avg_math +=  m1_array[index] + m2_array[index] 
       avg_sci += s1_array[index] + s2_array[index] 
    }

    avg_age /= age_array.length
    avg_math /= (2* m1_array.length)
    avg_sci /= (2* s1_array.length)


    return [avg_age, avg_math, avg_sci]
    
}





// Add totals at bottom of table
var present_totals =(arr) =>{
    age= arr[0]
    math= arr[1]
    science = arr[2]
  
    var table = document.getElementById("grade-results")
    let i = document.getElementById("grade-results").rows.length
    
    var row = table.rows[i-1]
    
    col1 = row.cells[0], 
    col2 = row.cells[1]
    col3 = row.cells[2];
    col4 = row.cells[3];
    col5 = row.cells[4];
    col6 = row.cells[5];
  
    //col1.innerHTML = "Avg Age"
    col2.innerHTML =  '<input type="number" list="student_list"  class ="power_totals" name="power_totals" value="'  + age.toFixed(1)  + '">' 
    //col3.innerHTML = "Avg Math"
    col4.innerHTML = '<input type="number" list="student_list"  class ="surge_totals" name="surge_totals" value="'  + math.toFixed(1)  + '">'
    //col5.innerHTML = "Avg Science"
    col6.innerHTML =  '<input type="number" list="student_list" class ="energy_totals" name="energy_totals" value="'  + science.toFixed(1)  + '">'
}










const main =() =>{   
    var student_list = defaultClass(generic_profile)    
    var datalist_options = dataList(students)
    addDefaultToRow(student_list, datalist_options)
     
}

main();

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <title>Class</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="class_2.js" defer></script>  






  </head>



  <body>

    <header>
      <nav class="container">
      </nav> 
    </header>
    
    <section id="top">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2pprOx6E7ru4w3U0GoHbI9ZMAFHdsS2izq-cNToqaPmLRjbbs" alt="Students">
    </section>

    <section id="main">
      <!--Loads Table-->
      <h1>Calculate average Age<br> Average Scores:</h1>
      <br>
      <p><button onclick="addRows()">Add a new row</button></p> 
      <form action = "class_web.html" method = "GET">
        <table>
          <!--Form for Application Selection-->
          <thead>
            <tr>
                <th> Name</th>
                <th>Age</th>
                <th>Math Score 1</th>
                <th>Math Score 2</th>
                <th>Science Score 1</th>
                <th>Science Score 2</th>
            </tr>
          </thead>
          <tbody id="grade-results">
          </tbody> 
        </table>
        <br>
        <hr>
        <br>
        <br>
        <br>
        <br>
    


          <input type= "submit" value="Blah Blah ....">
      </form>
      <hr>
    </section>
    
  </body>



</html>