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

Question

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

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

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

是否有人拥有成功使用的 sn-p 和/或使用 Validator 的 sn-p 的经验？

Answer 1

嗯，根据我在您的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。我写的所有内容都是基于我从另一个问题中获得的信息，如果有问题 - 发表评论，我会尝试改变;)