别担心，我们不需要找出这段代码中的任何错误。其工作完美。
我的老板来找我说:“嘿，请告诉我为动态 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>
最佳答案
以下是我要解决的一些问题:
- 把它包好。全局范围内的函数可能应该是可重用的=不。
- 使其支持每页多个表格
- 使其可配置!现在您需要进入并编辑代码以添加新列。
- 更少的innerHTML，更多的DOM。尝试在文本框中输入引言并观察它的中断。
- 不使用 HTML 属性设置事件处理程序。至少使用“DOM level 0”属性(
.onclick)，甚至更好，addEventListener(和attachEvent) - 设置
display: block;在<td>上可能不是您想要的。
如果我要求某人提供一个库来制作一个可编辑的表格，我不会接受您的实现。
不过，我会给他们与上面相同的列表，而不是给他们发送猴子的照片。你的老板不成熟。下次他随机向您发送一封电子邮件询问代码时，请给他回信并附上您提出的功能和实现的简短描述，并让他首先考虑一下。
关于javascript - 有没有更好的方法来创建动态 HTML 表而不使用任何 javascript 库(如 Jquery YUI 等)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2845813/