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

问题描述：

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

I have been trying to use Jeditable to make my html table editable. However upon much research I found that it is very difficult (if not impossible without a backend) to validate the input.

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

I really would prefer NOT to use any sort of plugin and simply write/use a bit of Javascript that would make cells editable and allow me to attach jQuery Validator to the input. The data will never get submitted to a backend (will return to default on page refresh) so the solution doesn't need to be complex...will only be using html and Javascript.

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

The problem with most code snippets I have found using Google is that they seem to get stuck when you click inside a cell and clicking outside the cell doesn't save/submit the change.

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

Does anyone have a snippet they have used successfully and/or experience using a snippet with Validator?

答

嗯，根据我在你的其他信息中获得的信息问题，您可以将该功能更改为：

Well, according to information I got in your another question, you can change that function to:

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看起来像：

when your html looks like:

<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看起来像：

As you could see, I rely on firstChild property, however it can be dangerous, e.g. when your html looks like:

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

然后至少FF返回< TextNode textContent => 作为firstChild。你不能依赖这个问题：

then at least FF returns <TextNode textContent=" "> as firstChild. Not to depend on this issue you can go with:

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

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

PS. All I wrote was based on info I got from another question, if something wrong - comment and I will try to change ;)

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

相关推荐