Entry
Create table dynamically, insert new row and edit cell values by javascript. (Gathered from various sources)
How to Create table dynamically?
How to insert new row and edit cell values by javascript ?
Jun 15th, 2006 05:23
Ravindra Pandya (ravi_ceo@yahoo.com), Gathered from various sources
Create table dynamically, insert new row and edit cell values by
javascript. (Gathered from various sources)
Tested on both IE and Firefox.
js file: rvtable.js
// All the js requires validation.
// This function creates table dynamically,.
function createDynTable(row, col) {
// get the reference for the body
var mybody = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
// creating all cells
for(var j = 0; j < row; j++) {
// creates a <tr> element
mycurrent_row = document.createElement("tr");
for(var i = 0; i < col; i++) {
// creates a <td> element
mycurrent_cell = document.createElement("td");
// add edit cell;
mycurrent_cell.ondblclick = function (evt) { editCell(this);};
// creates a text node
currenttext = document.createTextNode("cell is row
"+j+", column "+i);
// appends the text node we created into the cell <td>
mycurrent_cell.appendChild(currenttext);
// appends the cell <td> into the row <tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row <tr> into <tbody>
mytablebody.appendChild(mycurrent_row);
}
// appends <tbody> into <table>
mytable.appendChild(mytablebody);
// appends <table> into <body>
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border", "2");
return mytable;
}
// Insert row into table.
function insRowLast(table)
{
alert(table.rows);
// noOfRpws in table.
noOfRows = table.rows.length;
// no of columns of last row.
noOfCols = table.rows[noOfRows-1].cells.length;
// insert row at last.
var x=table.insertRow(noOfRows);
// insert cells in row.
for (var j = 0; j < noOfCols; j++) {
newCell = x.insertCell(j);
// make cell editable feature.
newCell.ondblclick = function (evt) { editCell(this);};
newCell.innerHTML="NEW CELL" + j;
}
}
//delete row
function deleteRow(table, row)
{
table.deleteRow(row);
}
//delete last row.
function deleteRow(table)
{
noOfRows = table.rows.length;
table.deleteRow(noOfRows-1);
}
//Example : In html file.
//<TD ONdblCLICK="editCell(this);">Data< /TD>
//added ONBLUR, cuz without that, u would recive an error if u had not
// edited the value in the input box
function editCell (cell) {
if (document.all) {
cell.innerHTML =
'<INPUT ' +
' ID="editCell"' +
' ONCLICK="event.cancelBubble = true;"' +
' ONCHANGE="setCell(this.parentElement, this.value)" ' +
' ONBLUR="setCell(this.parentElement, this.value)" ' +
' VALUE="' + cell.innerText + '"' +
' SIZE="' + cell.innerText.length + '"' +
'>';
document.all.editCell.focus();
document.all.editCell.select();
}
else if (document.getElementById) {
cell.normalize();
var input = document.createElement('INPUT');
input.setAttribute('value', cell.firstChild.nodeValue);
input.setAttribute('size', cell.firstChild.nodeValue.length);
input.onchange = function (evt) { setCell(this.parentNode,
this.value); };
input.onclick = function (evt) {
evt.cancelBubble = true;
if (evt.stopPropagation)
evt.stopPropagation();
};
cell.replaceChild(input, cell.firstChild);
input.focus();
input.select();
}
}
function setCell (cell, value) {
if (document.all)
cell.innerText = value;
else if (document.getElementById)
cell.replaceChild(document.createTextNode(value), cell.firstChild);
}
HTML file:mytabledemo.html
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM
Interfaces</title>
<script type="text/javascript" language="JavaScript"
src="rvtable.js"></script>
<script type="text/javascript">
var dynTable;
function start() {
dynTable = createDynTable(2,3);
}
function callInsertRowLast() {
insRowLast(dynTable);
}
function reload() {
window.location.reload();
}
</script>
</head>
<body onload="start()">
<input type="button" name="insertRow" value="insert"
onClick="javascript:callInsertRowLast()"/>
<input type="button" name="deleteRow" value="delete"
onClick="javascript:deleteRow(dynTable)"/>
<input type="button" name="reload" value="reload"
onClick="javascript:reload()"/>
</body>
</html>
