javascript动态的写入数据

zmfbird · 发表于 2013-2-7 14:56:45

将一组地区名字在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="显示地区"  />

</body>
</html>

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

		自动登录	找回密码
密码			立即注册

javascript动态的写入数据

浏览过的版块