Home/ Questions/Q 794379
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T22:18:15+00:00

Dont worry we dont need to find out any bug in this code. Its

  • 0

Dont worry we dont need to find out any bug in this code. Its working perfectly.

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.)

That 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 don’t 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>
                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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s some of the things I would fix:

    1. Wrap it up properly. Functions in the global scope for something that’s probably supposed to be re-usable = no-no.
    2. Make it support more than one table per page
    3. Make it configurable! Now you need to go in and edit the code just to add a new column.
    4. Less innerHTML, more DOM. Try typing a quote into your textboxes and watch it break.
    5. No setting event handlers with HTML attributes. At the very least use the “DOM level 0” properties (.onclick) or even better, addEventListener (and attachEvent)
    6. Setting display: block; on a <td> is probably not what you want.

    If I asked someone for a library to make an editable table, I wouldn’t accept your implementation.

    I’d give them the same list as above instead of sending them a picture of a monkey, though. Your boss is immature. The next time he randomly sends you an email asking for code, mail him back with a short description of you proposed features and implementation, and make him think the thing over first.

    • 0