我一直在尝试使用Jeditable来使我的html表格可编辑。然而,经过大量研究,我发现验证输入是非常困难的(如果不是没有后端)。
我真的不想使用任何类型的插件,只需编写/使用一些Javascript来使单元格可编辑,并允许我将jQuery Validator附加到输入。数据永远不会被提交到后端(在页面刷新时将返回默认值),因此解决方案不需要复杂...只会使用html和Javascript。
我发现使用Google的大多数代码段的问题是,当您在单元格内部单击并单击单元格外部时,它们似乎会卡住而不会保存/提交更改。
有没有人有他们成功使用的片段和/或使用验证码片段的经验?
答案 0 :(得分:2)
嗯,根据我在another question中获得的信息,您可以将该功能更改为:
function appendTable(id)
{
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var i = 0;
var rows = tbody.rows;
for (var r = 0; r < 4; r++) {
var row = rows[r];
for (var c = 0; c < 4; c++) {
var cell = row.cells[c];
cell.firstChild.value = subset[i++]; // the only part changed
}
}
}
当你的html看起来像:
<table id="alphabetTable" border="1">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
</tr>
<tr>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
</tr>
<tr>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
<td><input type = "text" size="1" /></td>
</tr>
</tbody>
</table>
正如您所看到的,我依赖firstChild
属性,但它可能很危险,例如当您的HTML看起来像:
<td> <input type = "text" size=1 /> </td>
然后至少FF返回<TextNode textContent=" ">
作为firstChild。你不能依赖这个问题:
cell.getElementsByTagName("input")[0].value = subset[i++];
PS。我写的所有内容都是基于我从另一个问题得到的信息,如果出错了 - 评论我会尝试改变;)