Scouting

by Grant

HTML

<input type="button" id="createTeam" value="Create Team">
<br>
<br>
<table id="table" bgcolor="white">
  <tr>
    <th style="border-left: 2px solid limegreen;">Team Number</th>
    <th>Team Name</th>
  </tr>
</table>

CSS

body {
  background: cyan;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  color: white;
  background: limegreen;
  //border-right: 2px solid green;
  border-bottom: 2px solid yellow;
}

tr{
  border-left: 2px solid limegreen;
}

input{
  width:100%
}

JavaScript

var number = 0;

document.getElementsByTagName("tr")[0].onmouseover = function() {
	
}



function addCol() {
  var a = document.createElement("tr");
  a.id = number++;
  if (a.id % 2 == 0) {
    a.style.background = "white";
  } else {
    a.style.background = "lightgrey";
  }
  a.onmouseover = function(e) {
    e.srcElement.parentElement.style.border = "1px solid black";
    e.srcElement.style.fontWeight = "bold";
    e.srcElement.parentElement.style.borderLeft="2px dashed limegreen";
  };
  a.onmouseout = function(e) {
    e.srcElement.parentElement.style.border = "";
    e.srcElement.style.fontWeight = "";
  };
  document.getElementById("table").appendChild(a);
}

function addRow(q, e) {
  e = document.getElementById(e);
  for (var i = 0; i < q; i++) {
    var a = document.createElement("td");
    a.innerHTML = "Hi";
    a.id = e.id + "," + i;
    e.appendChild(a);
  }
}
addCol();
addRow(3, 0);
addCol();
addRow(3, 1);

document.getElementById