Question

我正在学校的时间表管理，我的计划是这样的。

我制作了一张桌子，在每个单元格中都有一个链接＆＃34; assign＆＃34;。如果我单击该引导模式将出现，我将选择主题和教师名称。之后我将进行一些数据库操作，之后我想要教师姓名和主题显示在同一个单元格上。

显示主题和techer名称后，单元格右上角应该有一个小的关闭按钮。所以这是我的计划。

我完全可以做bootstrap模态。之后我无法这样做。

任何人都可以了解如何使单元格可编辑。建议我一些链接请参考。

Answer 1

我建议你对你的桌子进行数据绑定。这意味着该表是根据数据库中的数据生成的。

这样，当您更新数据时，您只需重新绑定表，它将代表数据库中所做的所有更改。

有很多技巧可以做到这一点，通过：php，html＆amp; ajax，asp.net，jsp，...选择。每种技术都使用它自己的语言，但它应该是相当直接的。

Answer 2

要使单元格可编辑，您可以查看以下内容： http://jsfiddle.net/t3qRL/2/

它是用原型框架创建的，但是使用jQuery它甚至会更容易。只需抓住隐藏的textareas的文本值，并用它替换表格单元格的内容。如果您的表包含动态添加的表行，您还应该查看jQuery的委托或bootraps的等效表。

我也要发布代码。所以这就是：

document.observe('dom:loaded', function () {
    $$('body')[0].on('click', '.txt_area', function (event, element) {
        event.stopPropagation();        
        var div_text = element.innerHTML;
        element.hide();
        var text_area = element.next('textarea');
        text_area.show();
        text_area.value = div_text;
        text_area.onmouseover = function () {
            text_area.observe('click', function(event) {
                Event.stop(event);
            });
        }

        text_area.onmouseout = function () {                
            $$('html')[0].on('click', function () {
                console.log(text_area.value);
                element.show();
                element.update(text_area.value);
                text_area.hide();
            });
        }
    });
});

如何动态更改html表中的数据

2 个答案: