javascript - 可编辑表格单元格的 Jeditable 替代方案

Question

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

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

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

是否有人拥有成功使用过的代码片段和/或使用验证器代码片段的经验？

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属性(property)，但它可能是危险的，例如当你的 html 看起来像:

<td> <input type = "text" size=1 /> </td>

那么 FF 至少返回 <TextNode textContent=" ">作为第一个 child 。为了不依赖这个问题，您可以:

cell.getElementsByTagName("input")[0].value = subset[i++]; 

PS。我写的所有内容都是基于我从另一个问题中获得的信息，如果有问题 - 评论，我会尝试更改；)