Question

我想从页面获取坐标（与id相关联）并将它们存储在json文件中。用户应该能够添加或删除更多ID。

基本上，如果我右键单击页面，会弹出一个输入字段 - 无论我在字段上键入什么（这是一个ID），x和y坐标都应该保存在json文件中。

文件应采用以下格式：

{“sensor1”：{“x”：121，“y”：23}，“sensor2”：{“x”：232，“y”：131}。。 }

我使用右键单击功能的上下文菜单，并能够获得x和y坐标（下面的代码中的pos.x和pos.y）。我现在需要动态地将它们保存在json文件中（用户应该能够添加/删除id）

如何从javascript创建json文件并动态添加或删除内容？帮忙？

到目前为止的代码（在页面上右键单击时获取x和y坐标）：

<html>

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.contextMenu.js" type="text/javascript"></script>
<link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css"    />

<script type="text/javascript">

    $(document).ready( function() {

        // Show menu when #myDiv is clicked
        $("#myDiv").contextMenu({
            menu: 'myMenu'
        },
            function(action, el, pos) {

            var name=prompt("Sensor Id ","Enter Id here");

            if (name!=null){


            alert(
                'Sensor: ' + name + 'Action: ' + action + '\n\n' +
                'Element ID: ' + $(el).attr('id') + '\n\n' + 
                'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
                'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
                );


            }   

        });

    });

</script>

</head>

<body>

<div id="myDiv">
    Right click to add
     <div id='cid' class='container' style="height: 100%">
    <img src="./3.jpg">
    </div>
</div>

<ul id="myMenu" class="contextMenu">
    <li class="edit"><a href="#edit">Place</a></li>
</ul>

从javascript形成json并动态更新内容

0 个答案: