Table Pure Javascript

Add, Update and Insert rows in a table

by Jose Montero

HTML

<div class="errMsg"></div>
<div>
  <form>
  <label for="name">Name:</label>
  <input type="text" id="name" />
  <div id="actionBtns">
  <button id="addBtn">Add</button>
  <button id="updateBtn">Update</button>
  <button id="deleteBtn">Delete</button>
  </div>
  </form>
</div>
<table>
<thead>
  <th>ID</th><th>Name</th>
</thead>
<tbody></tbody>
</table>

CSS

*{
  font-family: Arial;
}
form{
  padding: 5px 0px 10px 0px;
}
table {
  border-collapse: collapse;
  margin: 5px 5px;
  width: 30%;
}

table, th, td {
  border: 1px solid black;
  border-spacing: 10px;

}
td    {padding: 4px;}

.errMsg{
  color: red;
}
.rowSelected{
  background-color: lightblue;
}
#actionBtns{
  padding: 10px 0px 5px 0px;
}

JavaScript

var trans = [];
var table = document.querySelector('table tbody');
var nameDefaultValue;

// row count
var rowCount = document.querySelector('table tbody').rows.length;
console.log("row count", rowCount);

// Disable Edit and Delete Buttons if table has no rows
if (rowCount == 0) 
	document.querySelectorAll("#updateBtn, #deleteBtn").forEach((element) => element.disabled = true);
  
// Handle add click event
document.querySelector("#name").onchange = setDefaultValue;  
  
// Handle add click event
document.querySelector("#name").onclick = clearError;

// Handle add click event
document.querySelector("#addBtn").onclick = addRow;

// Handle add click event
document.querySelector("#updateBtn").onclick = updateRow;

// Handle add click event
document.querySelector("#deleteBtn").onclick = deleteRow;



function getRandomInt() {
  return Math.floor(Math.random() * Math.floor(1000));
}
function addRow(evt){
	evt.preventDefault();
	var name = document.querySelector("#name").value;
  if (validateName())
  {
  	var id = getRandomInt();
  	table.insertAdjacentHTML('beforeend', `<tr id=rowId${id}><td>${id}</td><td>${name}</td></tr>`);
    var elem = document.querySelector(`tr#rowId${id}`);
    //handle row selection event
		elem.addEventListener('click', selectRow, true);
    document.querySelector("#name").value = '';
  }
}

function updateRow(){
	var nameElem = document.querySelector("#name")
	console.log(nameElem.defaultValue);
}
function deleteRow(){

}
function clearError(){
	document.querySelector(".errMsg").textContent = "";
}
function selectRow(evt){
	console.log('Row clicked');
  //Check if there is already a row selected
	deselectRow();
  evt.target.closest('tr').classList.add("rowSelected");
  var rowElem =  evt.target.closest('tr');
  setInputValue(rowElem);
  enableButtons();
}
function validateName(){
var name = document.querySelector("#name").value;
  if (name.trim() == '')
  {
  	document.querySelector(".errMsg").textContent = "Name cannot be blanks";
   ...