Live Table Editor JS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="black"/>
<meta name="msapplication-TileColor" content="#da532c"/>
<meta name="msapplication-navbutton-color" content="black"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title></title>

<style>
*{
box-sizing: border-box;
margin:0; padding:0;
outline: none;
}

body{
background: rgb(251,244,234) url("");
min-width: 100vw; min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}

#container{
border: 1px solid red;
margin-top: 20px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}


table{
border:1.5px solid black;
border-collapse: collapse;
max-width: 100%;
table-layout: fixed;
caption-side: top;
}

th,td{
padding: 2px;
border:1px solid black;
height: calc(1em + 5px);
text-align: center;
vertical-align: center;
overflow: auto;
width: 10ch;
}

thead,tfoot,th{
background:rgb(204, 255, 204);
}


textarea{
height:20em;
width: 100%;
}


.block{
width: 100%;
height: 2em;
display: flex;
justify-content: space-between;
}

button{
width: 5ch;
height: 2em;
text-align: center;
}

input{
height: 2em;
width: 5ch;
text-align: center;
}


@media (orientation:portrait){
#container{
width: 95%; height: auto;
}
body{background-size: 35%}
}

@media (orientation:landscape){
#container{
width: 75%; height: auto;
}
body{background-size: 50%}
}

</style>
</head>
<body>
<div id="container">
<div>
<input id="row" type="number" min="1">
<span>x</span>
<input id="col" type="number" min="1">
<button id="go">Go</button>
</div>
<div class="block">
<button id="remrow">-Row</button>
<button id="addrow">+Row</button>
</div>
<div class="block">
<button id="remcol">-Col</button>
<button id="addcol">+Col</button>
</div>

<textarea id="output" readonly="true"></textarea>
<table id="input"></table>
</div>
<script>
let create= (x)=> document.createElement(x),
select= (x,y=document)=> y.querySelector(x),
selectAll= (x,y=document)=> y.querySelectorAll(x);

let a= selectAll("input"),
b= selectAll("button"),
c= select("table"),
d= select("textarea");


let row= select("#row"),
col= select("#col"),
go= select("#go"),
addCol= select("#addcol"),
remCol= select("#remcol"),
addRow= select("#addrow"),
remRow= select("#remrow"),
output= select("#output");
input= select("#input");


col.value= "2";
row.value= "3";


go.onclick=()=>{
input.innerHTML="";
let newRowCells=[];

for(let i=0; i<col.value; i++){
newRowCells.push("<td></td>");
}


for(let i=0; i<row.value; i++){
let newRow= create("tr");
newRow.innerHTML= newRowCells.join("");
input.append(newRow);
}


update();

};


function update(){
let outputvalue= "<table>"  + eskape(input.innerHTML,"unesc") + "</table>";
output.value=
outputvalue
.replace(/<td contenteditable="true">/g,"<td>")
.replace(/></g,">\n<")
.replace(/<td>\n<\/td>/g,"<td></td>");


selectAll("td").forEach(i=>{i.contentEditable= true;});
}


input.oninput= update;


function eskape(a,b="esc") {
if(b=="esc"){
return a
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}

if(b=="unesc"){
return a
.replace(/&amp;/g,"&")
.replace(/&lt;/g,"<")
.replace(/&gt;/g,">")
.replace(/&quot;/g,'"')
.replace(/&#039;/g,"'")
.replace(/&nbsp;/g," ")
.replace(/<br>/g,"\n");
}

}


//add rows
addRow.onclick=()=>{
let firstRow= select("tr");
let firstRowCells= selectAll("td",firstRow);
let newRowCells= [];
for(let i=0; i<firstRowCells.length; i++){
newRowCells.push("<td></td>");
}
let newRow= create ("tr");
newRow.innerHTML= newRowCells.join("");
input.append(newRow);
update();
};

//rem rows
remRow.onclick=()=>{
let allRows= selectAll("tr");
if(allRows.length>1){
allRows[allRows.length-1].remove();
}
update();
};

//rem cols
remCol.onclick=()=>{
let allRows= selectAll("tr");
allRows.forEach(i=>{
let allRowCells= selectAll("td",i);
if(allRowCells.length>1){
allRowCells[allRowCells.length-1].remove();
}
});
update();
};


//add cols
addCol.onclick=()=>{
let allRows= selectAll("tr");
allRows.forEach(i=>{
let cell= create("td");
i.append(cell);
});
update();
};


</script>
</body>
</html>