Untitled

<!DOCTYPE html>
<html>
<head>
<title>Spreadsheet</title>
<style type="text/css">
  td {
    padding:3px;
  }
tr:hover {
    background-color: yellow;
    }
    }
    </style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" id = "table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Student ID</th>
      <th>Faculty</th>
      <th>Major</th>
      <th>Minor</th>
      <th>Year</th>
      <th>Action</th>
    </tr>
  </thead>
    <tr id = "row1">
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td>
        <button onclick="swapFunction(this, 'Up')">Up</button>
        <button onclick="swapFunction(this, 'Down')">Dn</button>
        <button onclick = "delFunction(this)">Del</button>
      </td>
    </tr>
    <tr id = "row2">
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td>
        <button onclick="swapFunction(this, 'Up')">Up</button>
        <button onclick="swapFunction(this, 'Down')">Dn</button>
        <button onclick = "delFunction(this)">Del</button>
      </td>
    </tr>
    <tr id = "row3">
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td>
        <button onclick="swapFunction(this, 'Up')">Up</button>
        <button onclick="swapFunction(this, 'Down')">Dn</button>
        <button onclick = "delFunction(this)">Del</button>
      </td>
    </tr>
</table>
<button onclick = "newRowBtn()">New Row</button>
<script>
var counter = 4;

function delFunction(oButton) {
var table = document.getElementById("table");
var index = oButton.parentElement.parentElement.rowIndex;
table.deleteRow(index);
counter--;
}

 function swapFunction(oButton, direction){
  var table = document.getElementById("table");
  if (direction === "Down"){
  if(oButton.parentElement.parentElement.rowIndex === counter){
  alert("error");
  }
  table.insertBefore(oButton.parentElement.parentElement, oButton.parentElement.parentElement.rowIndex + 1);
  }
  if (direction === "Up"){
  if(oButton.parentElement.parentElement.rowIndex === 1){
  alert("error");
  }
  table.insertBefore(oButton.parentElement.parentElement, oButton.parentElement.parentElement.rowIndex - 1);
  }
  }


function newRowBtn() {
  var table = document.getElementById("table");
  var node = document.createElement("tr");
  for (var i=0;i<6;i++){

  var td = document.createElement("td");
  var inputTag = document.createElement("input");
  inputTag.setAttribute("type","text");

  td.appendChild(inputTag);

  node.appendChild(td);


  var tdBtn1 = document.createElement("td");
  var btn1 = document.createElement("button");
  btn1.innerHTML = "Up";
  btn1.setAttribute("onclick", "swapFunction(this,'Up')");
  tdBtn1.appendChild(btn1);

  var tdBtn2 = document.createElement("td");
  var btn2 = document.createElement("button");
  btn2.innerHTML = "Dn";
  tdBtn2.appendChild(btn2);

  var tdBtn3 = document.createElement("td");
  var btn3 = document.createElement("button");
  btn3.innerHTML = "Del";
  tdBtn3.appendChild(btn3);

  node.appendChild(tdBtn1);
  node.appendChild(tdBtn2);
  node.appendChild(tdBtn3);

  node.setAttribute("id", "row"+counter);
counter++;
table.appendChild(node);
}
}

</script>
</body>

</html>