Question

我有一个我肯定已经问过的问题，但是我在这里找不到。

我有一个表单元格，其中包含从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");
        }        
    });
}

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

总结：我想要一个可编辑的表格单元（往返mysqli db的数据），它也可以动态更改CSS样式。有可能吗？

谢谢！

Answer 1

我无法为您提供完整的源代码。

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

1）每个数据都位于<td>。

2）添加2个单独的元素：span / div元素以显示数据。

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

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

5）说它有id="name"

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

7）获取当前ID，并在其后附加“-文本”。

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

9）现在，您可以拥有可编辑的<td>。

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

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

希望它会起作用。

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

1 个答案: