<table style="width:100%">

    <th>Mrs. Fisher's Biology'</th>
    <th>Attendance</th>
  </tr>
  <tr>
    <td>Merry</td>
    <td id = "1"></td> 
  
  </tr>
  <tr>
    <td>Carlos</td>
    <td id = "2"></td>
  </tr>
  <tr>
    <td>Kyle</td>
    <td id = "3"></td>
  </tr>
  <tr>
    <td>Alex</td>
    <td id = "4"></td>
  </tr>
  <tr>
    <td>Bill</td>
    <td id = "5"></td>
  </tr>
  <tr>
    <td>Ganesh</td>
    <td id = "6"></td>
  </tr>
  <tr>
    
</table>

<span class="input-group-btn">
        <button class="btn btn-default" type="button1" id="Submit">Submit</button>
      </span>
		</div>
	</div>
</div>

<!DOCTYPE html>
<html id = 'table' >
   <head>
      <style>
         table, th, td {
            border: 2px solid black;
         }
      </style>
   </head>

<button type="button1" id = "s1">Merry Absent</button>
  <button type="button2" id = "s2">Carlos Absent</button>
  <button type="button3" id = "s3">Kyle Absent</button>
  <button type="button4" id = "s4">Alex Absent</button>
  <button type="button5" id = "s5">Bill Absent</button>
  <button type="button6" id = "s6">Ganesh Absent</button>
  
<div id="result"></div>
button{
margin-left: 200px;
    margin-top: 10px;
    width: 84px;
    height: 45px;   
    background: white;
    border: bla;
    color: black;   
    font-size:14px;
    font-weight:700;
}

#button1{
margin-left: 200px;
    margin-top: 10px;
    width: 84px;
    height: 45px;   
    background: ;
    border: bla;
    color: black;   
    font-size:14px;
    font-weight:700;
}

button {
  transition-duration: 1s;
}

button:hover {
  background-color: #1AA2DD; /* Blue */
  color: black;
}
var absent=0
var present=0
var array = ['Merry','Carlos','Kyle','Alex','Bill','Ganesh'];

document.getElementById('s1').onclick=function(){
  document.getElementById('1').style.background="red";
  document.getElementById('1').innerHTML = "Absent";
  absent+=1;
}
document.getElementById('s2').onclick=function(){
  document.getElementById('2').style.background="red";
  document.getElementById('2').innerHTML = "Absent";
  absent+=1;
}
document.getElementById('s3').onclick=function(){
  document.getElementById('3').style.background="red";
  document.getElementById('3').innerHTML = "Absent";
  absent+=1;
}
document.getElementById('s4').onclick=function(){
  document.getElementById('4').style.background="red";
  document.getElementById('4').innerHTML = "Absent";
  absent+=1;
}
document.getElementById('s5').onclick=function(){
  document.getElementById('5').style.background="red";
  document.getElementById('5').innerHTML = "Absent";
  absent+=1;
}
document.getElementById('s6').onclick=function(){
  document.getElementById('6').style.background="red";
  document.getElementById('6').innerHTML = "Absent";
  absent+=1;
};

document.getElementById('Submit').onclick=function(){
  if (absent>6){
    document.getElementById('result').innerHTML="Attendance submitted! Today 6 student(s) are absent! I wonder where they went...";
  }else{
    document.getElementById('result').innerHTML="Attendance submitted! Today "+absent+ " student(s) are absent! I wonder where they went...";
  }
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.