javascript动态的写入数据 -

zmfbird

浏览: 49420 次
性别:
来自: 西安

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript动态的写入数据

博客分类：

javascript

JavaScript json Ruby HTML 浏览器

将一组地区名字在list中显示，同时点击名字的时候可以将对应的经纬度作为参数调用googlemap的函数。
这个例子只完成一部分：
function addlist(mzs,zoom)
{
    var $list=document.getElementById("list");
    for(i=0;i<mzs.length;i++)
       {
          $list.innerHTML+="<span style=\"width:200px;\" onclick=\"alert('ok')\">" ;
           $list.innerHTML+=mzs[i].name;
           $list.innerHTML+="</span>"
           if(i%2==0)
               $list.innerHTML += "<br/>";
       }
}
mzs是个js对象，ruby对象通过json转换得到的，如下面的cunzhuangs
<script type="text/javascript">
var cunzhuangs=<%=(@cunzhuangs.collect{|s| s.attributes}).to_json %>;
var zoomlarger=10;
</script>
addlist函数可以将mzs里面的数据动态的写入div中。
下面这个例子是提问的时候xieye给出的。放这里参考：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<script type="text/javascript">

//定义全局变量
var area_arr = [
    {name:'北京', x:100, y:200},
    {name:'南京', x:300, y:400},
    {name:'东京', x:500, y:600}
] ;

//当点击li时，显示某个地区的数据
function alert_data(li){
    s = li.innerHTML + ' x:' + li.getAttribute('value_x') + 'y:'+ li.getAttribute('value_y');
    alert(s);
}

//显示所有地区，内容由全局变量提供
function display_area() {
    var arr = area_arr;
    var div = document.getElementById('div1');
    var html = '<ul>';
    for (var i=0, j = arr.length; i<j ; i++) {
      html += '<li value_x="'+arr[i].x + '" value_y="' + arr[i].y +   '">' + arr[i].name + '</li>';
    }
    html += '</ul>';
    div.innerHTML = html;

    //下面加事件
    var lis = div.getElementsByTagName('li');
    for (var i=0, j=lis.length;i<j ; i++) {
      lis[i].onclick= function(e){alert_data(this) };
    }

}

</script>

</head>
<body>

<div id="div1"></div>

<input type="button" value="显示地区" onclick="display_area()" />

</body>
</html>

注意：1、最好给li加上a链接，对用户友好
2、不要使用innerText，有浏览器兼容问题。
3、事件也可以直接在html写进去。
4、如果地区不多而且地区名唯一，就可以不给li元素加value_x和value_y属性。而是获取名称后在数组中遍历来找到其经纬度。
5、还有很多种方法可以实现。

分享到：