Question

我有一个从json获取对象的javascript代码。

从这里开始，我构建了一个html字符串：

   var htmlstr = "<table border=0>";
    for (var i=0;i<jsonData.people.length;i++) {
        htmlstr=htmlstr+"<tr><td>" + jsonData.people[i].name + "</td>";
        htmlstr=htmlstr+"<td>"+ jsonData.people[i].cash + "</td>";
        htmlstr=htmlstr+"<td><button onclick='changeCash(i)'>Update</button></td></tr>";
        }
    htmlstr=htmlstr+"</table>";

layer.addFeatures(features);
layer.events.on({ "featureselected": function(e) { updateMak('mak', htmlstr) } });

    function changeCash(k) {
       jsonData.people[k].cash=jsonData.people[k].cash+100;
       }

HTML页面如下：

    <script type="text/javascript">
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                  alert("Mobile device detected.");             }
                function updateMak(id,content) {
                    var container = document.getElementById(id);
                    container.innerHTML = content;
                } </script> 
<div id="mak"> List of People  </div>

让我们说这显示了10个人的钱。如果我点击其中一个更新按钮，我认为json数据按预期更新。但我不知道如何验证它。表单中的值不会更新changeCash函数中的新值。

如何更新htmlstr并更新屏幕上已显示的内容？

请告知。

Answer 1

为人民现金生成htmlstr时

htmlstr=htmlstr+"<td>"+ jsonData.people[i].cash + "</td>";

您还应该为此td生成id，以便您可以从函数changeCash（k）更新内容。

像

这样的东西

htmlstr=htmlstr+"<td id='peoplecash"+i+"'>" + jsonData.people[i].cash + "</td>";

然后在你的changeCash函数中

function changeCash(k) {
   jsonData.people[k].cash=jsonData.people[k].cash+100;
   var peoplecash= document.getElementById("peoplecash"+k);
   peoplecash.innerHTML = jsonData.people[k].cash;}

javascript：从json构建一个html表单，但无法更新表单

1 个答案: