AidanF

by Ram Patra

HTML

<center>
  <table class="tg" id="assignTable">
    <thead>
      <tr>
        <th class="tg-baqh">Student Name</th>
        <th class="tg-baqh">Student ID</th>
        <th class="tg-baqh">Assignment 1</th>
        <th class="tg-baqh">Final Grade</th>
      </tr>
    </thead>
    <tr>
      <td class="tg-yw4l" contenteditable="true" placeholder="-"></td>
      <td class="tg-yw4l" contenteditable="true" placeholder="-"></td>
      <td class="tg-lqy6" contenteditable="true" placeholder="-"></td>
      <td class="tg-lqy6" contenteditable="true" placeholder="-"></td>
    </tr>
  </table>
</center>
<br>
<center>
  <table border="0">
    <tr>
      <td>
        <input type="button" class="btn-style" id="btn1" value="Add Row" onClick="appendRow()" />
      </td>
      <td>
        <input type="button" class="btn-style" id="btn2" value="Add Column" onClick="appendColumn()" />
      </td>
      <td>
        <input type="button" class="btn-style" id="btn3" value="Delete Row" onClick="deleteRow()" />
      </td>
      <td>
        <input type="button" class="btn-style" id="btn4" value="Delete Column" onClick="deleteColumn()" />
      </td>
      <td>
        <input type="button" class="btn-style" id="btn5" value="Calculate Average" onClick="calAverage()" />
      </td>
      <td>
        <input type="button" class="btn-style" id="btn6" value="Export" onClick="exportTable()" />
      </td>
      <td>
        <input type="button" class="btn-style" id="btn7" value="Import" onClick="importTable()" />
      </td>
    </tr>
  </table>
</center>

CSS

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #999;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #999;
  color: #444;
  background-color: #F7FDFA;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #999;
  color: #fff;
  background-color: #26ADE4;
}

.tg .tg-vy9e {
  font-size: 18px;
  font-family: serif !important;
  ;
  text-align: center;
  vertical-align: top
}

.tg .tg-baqh {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #999;
  color: #fff;
  background-color: #26ADE4;
  text-align: center;
  vertical-align: top
}

.tg .tg-lqy6 {
  text-align: right;
  vertical-align: top
}

.tg .tg-yw4l {
  vertical-align: center
}

.btn-style {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: auto;
  cursor: pointer;
  display: block;
  float: right;
}

.nCol {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 50px;
  background-color: #26ADE4;
}

.highlight {
  border-color: #4df351 !important;
}

JavaScript

var assignment = 1;
var table = document.getElementById("assignTable"); // table reference

// event listeners
for (var i = 0; i < table.rows.length; i++) {
  table.rows[i].addEventListener('click', function() {
    [].forEach.call(table.rows, function(el) {
      el.classList.remove("highlight");
    });
    this.className += ' highlight';
  }, false);
}

// create table cell
function createCell(cell, style) {
  cell.setAttribute("class", style);
  cell.setAttribute("contenteditable", true);
  cell.setAttribute("placeholder", "-");
}

function createHeadCell(cell, style) {
  cell.outerHTML = "<th> Assignment " + (++assignment) + "</th>";
  cell.setAttribute("class", style);
}

function appendRow() {
  var row = table.insertRow(table.rows.length), // append table row
    i;
  // insert table cells to the new row
  for (i = 0; i < table.rows[0].cells.length; i++) {

    if (i == 0 || i == 1) {
      createCell(row.insertCell(i), 'tg-yw4l');
    } else {
      createCell(row.insertCell(i), 'tg-lqy6');
    }
  }
}

// append column to the HTML table
function appendColumn() {
  var i;
  // open loop for each row and append cell
  for (i = 0; i < table.rows.length; i++) {
    if (i == 0) {
      createHeadCell(table.rows[i].insertCell(table.rows[i].cells.length - 1), "nCol");
    } else {
      createCell(table.rows[i].insertCell(table.rows[i].cells.length - 1), 'tg-lqy6');
    }
  }
}

function deleteRow() {
  table.deleteRow(table.rows.length - 1);
}

function deleteColumn() {
  if (assignment == 1) return;

  for (var i = 0; i < table.rows.length; i++) {
    table.rows[i].deleteCell(table.rows[i].cells.length - 2);
  }
  assignment--;
}


function calAverage() {
  var i, j;
  var rows = table.rows;
  var total;
  var totalSubmitted = 0;
  var unSubmitted = 0;

  for (i = 1; i < rows.length; i++) {
    total = 0;
    var cells = rows[i].cells,
      count = 0;

    for (j = 2; j < cells.length - 1; j++) {
      var grade =...