有没有更好的方法来创建动态HTML表，而无需使用任何JavaScript库（如Jquery YUI等）

Question

不用担心，我们不需要找出此代码中的任何错误。 它的工作完美。

我的老板来找我说：“嘿，告诉我为动态HTML表编写代码的最佳方法是什么（添加行，删除行，更新行）。 不需要添加任何CSS。只需使用JavaScript。不需要jQuery库等令我感到困惑的是，在项目的中间，他为什么要这样愚蠢的练习。我写过以下代码并将其邮寄给他的事，15分钟后我收到了他的来信。”

我期望像您这样的人能提供更好的代码。 无论如何，要做好猴子。（并附上猴子的照片。）

那是邮件。 逐行。

我想回复他，但在此之前，我想了解我代码的质量。 这真的很烂吗... !!! 或者他只是在取笑我的。

我认为代码不是很糟糕。 如果可以，请更正我。 代码运行正常。 只需将其复制粘贴到HTML文件中即可。

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

Answer 1

这是我要解决的一些问题：

正确包装。 全局范围内某些可能应该可重用的功能=否。
使其每页支持多个表
使其可配置！ 现在，您需要进入并编辑代码以添加新列。
更少的innerHTML，更多的DOM。 尝试在文本框中输入引号，然后观察它是否中断。
没有设置带有HTML属性的事件处理程序。 至少使用“ DOM级别0”属性（ .onclick ）或什至更好，使用addEventListener （和attachEvent ）
设置display: block; <td>内容可能不是您想要的。

如果我要求某人提供一个图书馆来制作可编辑的表格，那么我将不接受您的实现。

不过，我会给他们与上面相同的列表，而不是给他们发送猴子的照片。 你的老板不成熟。 下次他随机向您发送一封询问代码的电子邮件时，将对您提出的功能和实现的简短描述发回给他，然后让他首先考虑一下。

Answer 2

您本可以将其拆分为单独的功能，从而使其更易于阅读和重用。

有没有更好的方法来创建动态HTML表，而无需使用任何JavaScript库（如Jquery YUI等）

问题描述

2 个解决方案

解决方案1
4 已采纳 2010-05-16 23:09:18

解决方案2
1 2010-05-16 23:09:14

有没有更好的方法来创建动态HTML表，而无需使用任何JavaScript库（如Jquery YUI等）

问题描述

2 个解决方案

解决方案1 4 已采纳 2010-05-16 23:09:18

解决方案2 1 2010-05-16 23:09:14

解决方案1
4 已采纳 2010-05-16 23:09:18

解决方案2
1 2010-05-16 23:09:14