Question

我对ajax很新，我不确定为什么我的函数没有触发。我有一个动态建立的表，其中包含来自MySQL数据库的值。我正在努力使表格能够内联编辑。我要编辑的表的部分构建如下....

<tr class="table-row">
    <td><?php echo $row['idcpu']; ?></td>
    <?php 
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'name','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['name']." </td>";
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'description','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['description']."</td>";
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'price','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['price']."</td>";
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'quantity','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['quantity']."</td>"; ?>
</tr>

和Javascript一样......

<script>
    function saveToDatabase(editableObj,column,id) {
        $(editableObj).css("background","#FFF url(Loading_icon.gif) no-repeat right");
        $.ajax({
            url: "update/cpu.php",
            type: "POST",
            data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
            success: function(data){
                $(editableObj).css("background","#FDFDFD");
            }
       });
    }
</script>

我已经尝试了很多不同的方式将代码输出到html所以我知道这不是问题，但我可能很容易错过我需要的东西，因为我说我是相当新的。任何帮助将不胜感激

Answer 1

您的代码似乎工作得很好。你可以看看这里：

JSBin Example

我已经使用Chrome v49对其进行了测试。

正如@ zer00ne所提到的，您应该尝试使用<input>将其嵌套在<td>元素内，并在输入更改时运行ajax调用。浏览器支持要好得多。

Javascript函数无法正常工作onblur或onclick

1 个答案: