Table

Fiddle about my own created table that contains JavaScript.

HTML

<table id="table">
  <thead>
  <tr>
    <th id="controls"><input class="btn" id="add" type="button" value=" + " 

onclick="createTr()" title="Add player"></input> &nbsp; Controls</th>
    <th id="name">Name</th>
    <th id="points">Points</th>
  </tr>
  </thead>
  <tbody id="tbody">
  <tr class="tRow">
  </tr>
  </tbody>
</table>

CSS

body {
    line-height: 1.5;
    background: #333;
    color: #FFF;
    font: 15px Roboto;
    margin: 1cm 3cm;
    align-content: center;
}
* {
    box-sizing: border-box;
}
.btn {
    background: #009968;
    color: #EEE;
    border: transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}
.btn:hover {
    background: #FFF;
    color: #009968;
    box-shadow: 0px 0px 8px #555;
}
table {
    border: 1px solid #AAA;
    margin: 0px;
    padding: 0px;
    width: 50%;
    background: #888;
    transition: all 0.2s ease 0s;
}
thead {
    background: #FF4436;
}
th {
    padding: 5px;
    font: 20px Open Sans Light;
}
#add {
    position: absolute;
    width: 20px;
    left: 127px;
    top: 51px;
}
#controls {
    width: 25%;
}
#name {
    width: 40%;
}
.inputName {
    width: 100%;
}
.pts {
    text-align: center;
    font: 17.5px Droid Sans;
    width: 100%;
}
.remove {
    background: #DD2214;
    color: #FFF;
    border: transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}
.remove:hover {
    background: #FF4436;
}
.ptsAdd1 {
    background: #70AB1D;
    color: #FFF;
    border: transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}
.ptsAdd1:hover {
    background: #8AC007;
}
.ptsRem1 {
    background: #FF9800;
    color: #FFF;
    border: transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}
.ptsRem1:hover {
    background: #FFC107;
}

JavaScript

document.addEventListener("DOMContentLoaded", function(){
   var button = document.querySelector(".ptsAdd1");
   var span = document.querySelector(".pts");
  
   button.onclick = function() {
     span.textContent = parseInt(span.textContent, 10) + 1;
   }
  
});
function removeRow() {
    document.getElementById('table').deleteRow(0);
}
function createTr() {
    var table = document.getElementById("tbody");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(0);
    var cell3 = row.insertCell(0);
    cell1.innerHTML = "<span class='pts' align='center'>0</span>";
    cell2.innerHTML = "<input type='text' placeholder='Enter name here' 

class='inputName' required></input>";
    cell3.innerHTML = "<input type='button' value=' - ' title='Remove player' 

class='remove' id='removeBtn' onclick='removeRow()'></input>&nbsp;<input type='button' 

value=' +1 ' title='Add 1 point' class='ptsAdd1'></input>&nbsp;<input type='button' 

value=' -1 ' title='Remove 1 point' class='ptsRem1'></input>"
}