Javascript从按钮上传信息 - javascript

我正在研究在php（phtml视图文件）中生成的概要头带，如下所示：

echo    "<div>
        Nom : " . $this->currentP->getName() . "</br>
        " . "Version : " . $this->currentP->getVersion() . "</br>
        " . "Date de début : " . $this->currentP->getCreation_date() . "</br>
         ...
        </div>";

我想在每个字段旁边有一个小按钮（带有图像），以突出显示每个字段的当前值，并允许用户在未提交等情况下直接更改它...一种概述性仪表板上的动态版本。这样就可以编辑所显示的对象，而无需弹出窗口或更改当前页面。

我没有在网络上找到任何东西，所以我认为这要归功于我不太了解的Javascript。

首先，我不知道是否必须声明链接或按钮来调用更新函数。那么，接下来会发生什么？

感谢您的阅读和您的答复！

参考方案

1）您为每个字段添加按钮（或者更好的是，直接单击字段）：<div class='editableField'><span>Some text to edit</span></div>

2）在字段上单击，隐藏文本并应用输入字段

$('.editableField').click(function(){
    $(this).append('<input type="text" value="'+$('span', this).text()+'" class="editableInput"/>');
    $('span', this).remove(); // remove this span temporary
});

3）当.editableInput焦点时，使用ajax调用保存字段值：

$(document).on('focusOut', '.editableInput', function(){
    $.ajax({
       url: 'example.com/saveFieldValues.php',
       type: 'post',
       data: {fieldValue: $(this).val()},
       success: function(){
           $(this).parent().append('<span>'+$(this).val()+'</span>'); // return back old span element
           $(this).remove(); // remove unnecessary input field 
       }
    });
});

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

如果我得到url('')，我该如何使用另一个URL - javascript

我是新手，正在写这篇文章，但是如果源上没有图像，那么我只有空白。有人可以告诉我，如果我正在获取背景图像，如何获取/images/no-image.jpg：url（）;这是我的代码：<div class="uk-clearfix uk-position-relative"> <div class="recipeb…

粗糙的Unicode->没有CLDR的语言代码？ - javascript

我在写字典应用。如果用户键入Unicode字符，我想检查该字符是哪种语言。例如字 - returns ['zh', 'ja', 'ko'] العربية - returns ['ar'] a - returns ['en', 'fr', …

Jsonp没有出现``访问控制允许来源''错误 - javascript

在我的PHP中，我喜欢这样来回显jsonp类型的“ json数据”echo $_GET['callback'] . '('.json_encode($arr).')'; 在我的js（angularjs）中，$http.get('http://example.com/app/?callbac…

使用C＃执行JavaScript页面 - javascript

我正在尝试使用C＃抓取一个网站。在此过程中的某个时候，网站返回了我需要执行的JavaScript页面，以便它将生成一些参数，然后使用所生成的参数作为查询变量来发布请求。这是JavaScript文件https://jsfiddle.net/7aw5vr59/浏览器生成的结果文件如下所示：<imimxxxyyy id="ActiveX"…