时间戳

首页 > 解决方案 > 将类更改为可编辑的表格单元格

javascript - 将类更改为可编辑的表格单元格

问题描述

我有一个问题，我确定以前有人问过，但我在这里找不到。

我有一个表格单元格，其中包含从 mysqli db 加载的数据 - 我使用 css 限制了单元格的大小

    .hideContent {
        overflow: auto;
        line-height: 1em;
        height: 4em;
    }

    .showContent {
        overflow: auto;
        line-height: 1em;
        height: 40em;
    }

为了使工作，我需要<div>像<td>这样包装：

<td> <div class="hidecontent"> </div> </td>

问题是，这个单元格也是可编辑的，所以当我编辑 td 时，保存在 mysqli db 中的数据包含<div>标签。我是用我在网上找到的别人的代码来做的，很抱歉没有记下，我不记得我从哪里得到的。

            <div class="hideContent">
                <td contenteditable="true" onBlur="saveToDatabase(this,'summary','<?php echo $result['id']; ?>','<?php echo $_GET['customer'] ?>','corr')">
                    <?php echo $result['summary']?>
                </td>
            </div>

function saveToDatabase(editableObj,column,id,cust_name,db) {
    $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
    $.ajax({
        url: "saveedit.php",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id+'&cust_name='+cust_name+'&db='+db,
        success: function(data){
            $(editableObj).css("background","#FDFDFD");
        }        
    });
}

当我在这里时，我还想将类更改为“showContent”onClick。希望你能帮助我:)

总结一下：我想要一个可编辑的表格单元格（进出 mysqli db 的数据），它还可以动态更改 css 样式。那可能吗？

谢谢！

标签： javascriptphphtmlcssajax

解决方案

我不能用完整的源代码指导你。

但是，我仍然可以指导您完成以下步骤：

1）你有<td>每个数据。

2) 添加 2 个单独的元素：一个 span/div 元素来显示数据。

3) 另一个默认隐藏的文本字段。

4）首先，用数据加载span/div。

5）说它有id="name"

6）点击它，显示文本框。

7) 获取当前 id，将 '-text' 附加到它。

8）这将是id可编辑的元素。

9) 现在，您可以拥有可编辑<td>的 .

10) 在文本框模糊时，触发 AJAX 请求以将值保存到数据库。

11）另外，隐藏文本框并显示相应的跨度/ div（当然有更新的值。）

希望它会奏效。

推荐阅读