可编辑表格单元格的替代Jeditable

Question

我一直在尝试使用Jeditable来使我的html表可编辑。 然而，经过大量研究，我发现验证输入非常困难（如果不是没有后端）。

我真的不想使用任何类型的插件，只需编写/使用一些Javascript，使单元格可编辑，并允许我将jQuery Validator附加到输入。 数据永远不会被提交到后端（在页面刷新时将返回默认值），因此解决方案不需要复杂...只会使用html和Javascript。

我发现使用Google的大多数代码段的问题是，当您在单元格内单击并单击单元格外部时，它们似乎会卡住，不会保存/提交更改。

有没有人有他们成功使用的片段和/或使用Validator片段的经验？

Answer 1

好吧，根据我在你的另一个问题中得到的信息，你可以将该功能改为：

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。 我写的所有内容都是基于我从另一个问题得到的信息，如果出错了 - 评论，我会尝试改变;）