Is there a better way to create a dynamic HTML table without using any javascript library like JQuery YUI etc.
Don't worry, we don't need to find a bug in this code. It works great.
My boss came to me and said, "Hey, just tell me the best way to write code for a dynamic HTML table (add row, remove row, update row). No need to add CSS. Javascript. No jQuery library, etc." I was confused that in the middle of a project, why he asked for some stupid exercise like this. That I wrote the following code and mailed him, and 15 minutes later I got mail from him. "
I expected much better code from a guy like you. Good job monkey anyway. (And with a monkey as an attachment.)
It was mail. Line by line.
I want to answer him, but before that I want to know about the quality of my code. This is really shit ... !!! Or he was just making fun of me.
I don't think the code is really crappy. Correct me if you can. The code works fine. Just copy it to your HTML file.
<html>
<head>
<title>
Crap work
</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>
a source to share
Here are some of the things I would fix:
- Wrap it up correctly. Functions in the global scope for something that probably needs to be reused = no-no.
- Make it more than one table per page
- Make it customizable! Now you need to go in and edit the code to add a new column.
- Less innerHTML, more DOM. Try typing a quote in your text boxes and see how it breaks.
- No event handlers with HTML attributes. At least use the "DOM level 0" properties (
.onclick
) or even better,addEventListener
(andattachEvent
) - Tuning
display: block;
to<td>
is probably not what you want.
If I asked anyone to create a library for editing, I would not accept your implementation.
I would give them the same list as above instead of sending them a monkey image. Your boss is immature. The next time he accidentally sends you an email asking for a code, send him an email with a brief description of the features you offer and its implementation and get him thinking about it.
a source to share