Is there any better way for creating a dynamic HTML table without using any javascript library like
Posted
by piemesons
on Stack Overflow
See other posts from Stack Overflow
or by piemesons
Published on 2010-05-16T22:57:57Z
Indexed on
2010/05/16
23:00 UTC
Read the original article
Hit count: 304
html
|JavaScript
Dont worry we dont need to find out any bug in this code.. Its working perfectly.:-P
My boss came to me and said "Hey just tell me whats the best of way of writing code for a dynamic HTML table (add row, delete row, update row).No need to add any CSS. Just javascript. No Jquery library etc. I was confused that in the middle of the project why he asking for some stupid exercise like this. What ever i wrote the following code and mailed him and after 15 mins i got a mail from him. "
I was expecting much better code from a guy like you. Anyways good job monkey.(And with a picture of monkey as attachment.)
thats was the mail. Line by line.
I want to reply him but before that i want to know about the quality of my code. Is this really shitty...!!! Or he was just making fun of mine.
I dont think that code is really shitty. Still correct me if you can.Code is working perfectly fine. Just copy paste it in a HTML file.
<html>
<head>
<title>
Exercise CSS
</title>
<script type="text/javascript">
function add_row()
{
var table = document.getElementById('table');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = ' <span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>';
cell3.setAttribute("style", "display:none;");
var cell4 = row.insertCell(3);
cell4.innerHTML = '<span onClick="save(this)">Save</span>';
}
function save(e)
{
var elTableCells = e.parentNode.parentNode.getElementsByTagName("td");
elTableCells[0].innerHTML=elTableCells[0].firstChild.value;
elTableCells[1].innerHTML=elTableCells[1].firstChild.value;
elTableCells[2].setAttribute("style", "display:block;");
elTableCells[3].setAttribute("style", "display:none;");
}
function edit(e)
{
var elTableCells = e.parentNode.parentNode.getElementsByTagName("td");
elTableCells[0].innerHTML='<input type="text" value="'+elTableCells[0].innerHTML+'">';
elTableCells[1].innerHTML='<input type="text" value="'+elTableCells[1].innerHTML+'">';
elTableCells[2].setAttribute("style", "display:none;");
elTableCells[3].setAttribute("style", "display:block;");
}
function delete_row(e)
{
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}
</script>
</head>
<body >
<div id="display">
<table id='table'>
<tr id='id'>
<td>
Piemesons
</td>
<td>
23
</td>
<td >
<span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>
</td>
<td style="display:none;">
<span onClick="save(this)">Save</span>
</td>
</tr>
</table>
<input type="button" value="Add new row" onClick="add_row();" />
</div>
</body>
© Stack Overflow or respective owner
