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

时间:2011-03-09 18:54:54

标签: javascript jquery jeditable

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

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

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

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

1 个答案:

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