One way of doing it is to set an onclick handler for each of the table cells. In that handler, you:
1) get the innerHTML of the cell
2) create an input element
3) set the input's text to be the text read in #1
4) replace the innerHTML of the cell with the html for an input element that contains the text that the cell did
5) sets an onblur handler for the input element, that essentially reverses these steps.
Something like this below perhaps?
[EDIT: I forgot to remove/reinstate the onclick handler for the cell when it's contents were changed to an input element. This meant that clicking on an input then filled it with the text "<input>". See the lines marked with ***
Now all you need to do is transfer the info in the table back to a php page so you can update the database with it. You could do it a whole bunch of ways, I'll leave it to you to decide on and implement one.
<!DOCTYPE html>
<html>
<head>
<script>
function onCellClicked()
{
var clickedCell = this;
var oldText = clickedCell.innerHTML;
var input = document.createElement('input');
input.value = oldText;
input.onblur = onInputLoseFocus;
clickedCell.innerHTML = '';
clickedCell.appendChild(input);
clickedCell.removeEventListener('click', onCellClicked, false);
input.focus();
}
function onInputLoseFocus()
{
var input = this;
var parentCell = input.parentNode;
parentCell.innerHTML = input.value;
parentCell.onclick = onCellClicked;
}
function addHandlerToElementsByTagName(parent, tagName, handlerName, handlerFunc)
{
var mList = parent.getElementsByTagName(tagName);
for (var i=0, n=mList.length; i<n; i++)
mList[i].addEventListener(handlerName, handlerFunc, false);
}
function makeTable(max)
{
var table=document.createElement('table');
var tbody=document.createElement('tbody');
var tr, cellIndex = 0;
for (var row=0;row<max;row++)
{
tr=document.createElement('tr');
for (var col=0;col<max;col++)
{
td = document.createElement('td');
td.appendChild(document.createTextNode('Cell #' + cellIndex++));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
}
function myInit()
{
var tbl = makeTable(6);
addHandlerToElementsByTagName(tbl, 'td', 'click', onCellClicked)
document.body.appendChild(tbl);
}
</script>
</head>
<body onload="myInit();">
</body>
<html>
Submit an article or tip