Hope this is what you were looking for, if not, it should get you close to where you want to go. I added comments around the the key statements.
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function CreateTable() {
var rowCtr;
var cellCtr;
var rowCnt;
var cellCnt;
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('Table');
table.border = '1';
table.id = 'myTable';
var tableBody = document.createElement('Tbody');
tableBody.onclick = function (e) {
ChangeRow(e);
};
table.appendChild(tableBody);
rowCnt = document.getElementById('txtrows').value;
cellCnt = document.getElementById('txtcols').value;
for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
var tr = document.createElement('tr');
tr.id = 'info';
tableBody.appendChild(tr);
for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
var td = document.createElement('td');
td.width = '120';
td.appendChild(document.createTextNode("Row:" + rowCtr + " Column:" + cellCtr));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
}
function ChangeRow(e){
e = e || window.event;
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TD") {
target = target.parentNode;
}
if (target) {
var sibling = target.nextSibling;
if(sibling) {
target.colSpan = "2";
target.innerText = target.innerText + sibling.innerText;
sibling.remove();
}
}
}
$(document).ready(function () {
});
</script>
<html>
<body>
Rows: <input type="text" id="txtrows" size="2" ><br>
Columns: <input type="text" id="txtcols" size="2" ><br>
<input type="button" value="Create The Table" onclick="CreateTable()">
<div id="myDynamicTable">
</div>
</body>
</html>