Fatal编程技术网
  • javascript/
  • 有没有更好的方法来创建动态HTML表而不使用任何javascript库，如Jquery YUI等

有没有更好的方法来创建动态HTML表而不使用任何javascript库，如Jquery YUI等

javascript html

有没有更好的方法来创建动态HTML表而不使用任何javascript库，如Jquery YUI等,javascript,html,Javascript,Html,别担心，我们不需要找出此代码中的任何错误。它工作得很好。 我的老板过来对我说：“嘿，告诉我为动态HTML表（添加行、删除行、更新行）编写代码的最佳方式是什么？”不需要添加任何CSS。只是JavaScript。没有jQuery库。< /强>我感到困惑的是，在项目的中间，他为什么要这样愚蠢的运动。我写下了下面的代码并邮寄给他，15分钟后我收到了他发来的邮件。 我希望像你这样的人能写出更好的代码。不管怎样，猴子干得不错。（附带一张猴子的照片。） 那是邮件。一行一行 我想回复他，但在此之前我想知道我的代

别担心，我们不需要找出此代码中的任何错误。它工作得很好。

我的老板过来对我说：“嘿，告诉我为动态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> 


垃圾工作
函数add_row（）
{
var table=document.getElementById（'table'）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var cell1=行插入单元格（0）；
var element1=document.createElement（“输入”）；
element1.type=“text”；
单元格1.附加子元素（元素1）；
var cell2=行插入单元格（1）；
var element2=document.createElement（“输入”）；
element2.type=“text”；
第2单元。附加子元素（元素2）；
var cell3=行插入单元格（2）；
cell3.innerHTML='Edit/Delete'；
cell3.setAttribute（“样式”，“显示：无；”）；
var cell4=行插入单元格（3）；
cell4.innerHTML='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（“样式”，“显示：块；”）；
elTableCells[3].setAttribute（“样式”，“显示：无；”）；
}
功能编辑（e）
{
var elTableCells=e.parentNode.parentNode.getElementsByTagName（“td”）；
elTableCells[0]。innerHTML=''；
elTableCells[1]。innerHTML=''；
elTableCells[2].setAttribute（“样式”，“显示：无；”）；
elTableCells[3].setAttribute（“样式”，“显示：块；”）；
}
函数删除_行（e）
{
e、 parentNode.parentNode.parentNode.removeChild（e.parentNode.parentNode）；
}
介子
23
编辑/删除
拯救

您可以将其拆分为单独的函数，这样既便于阅读，又便于重用。

以下是我要解决的一些问题：

  • 把它包好。在全局范围内的函数可能被认为是可重用的=否
  • 使其每页支持多个表
  • 让它可配置！现在，您需要进入并编辑代码，以便添加一个新列
  • 更少的innerHTML，更多的DOM。试着在你的文本框中输入一个引号，然后看着它断开
  • 没有设置具有HTML属性的事件处理程序。至少要使用“DOM级别0”属性（
    .onclick
    ），或者更好的是，
    addEventListener
    （和
    attachEvent
    ）
  • 设置<代码>显示：块上的code>可能不是您想要的
    • 如果我要求某人提供一个库来制作一个可编辑的表，我不会接受您的实现

    不过，我会给他们和上面一样的清单，而不是给他们寄一张猴子的照片。你的老板不成熟。下次他随机给你发邮件询问代码时，给他回一封信，简要描述你提出的功能和实现，让他先考虑一下。

    不管怎样，我都不认为在老板叫我“猴子”的地方工作会开心。或者让我无缘无故地用愚蠢的需求编写愚蠢的小片段。