请教 关于在页面上循环显示数据的格式问题

很多时候会遇到这样的情况:
要从数据库拿出一组数据,格式化之后循环输出到页面上(例如相册里的图片)。然后要在每个数据上加个onclick事件,点击后弹出一个DIV,用来修改数据(不是提交表单,只是在页面上修改数据,或者发ajax请求,改完后直接显示在同页面上)。

我想讨论的问题是:
怎样让弹出的这个DIV定位到指定的数据上呢?

我现在想到的方法有:
1、给每个数据加个唯一的ID

data1
data2
function showchange(id){ document.getElementById("targetDiv").value = id; var data = document.getElementById(id).innerHTML; document.getElementById("modDiv").style.display = "block"; }

这样的。点击之后把传入的ID存到全局变量或隐藏域里,用户改完后再用JS读到这个ID完成页面上的修改。

2、用this对象

data1
data2
function showchange(div){ globalTargetDiv = div; var data = div.innerHTML; document.getElementById("modDiv").style.display = "block"; }

直接从元素里拿东西。

请问哪个方法比较好?大家平时都是怎样处理这类问题的?
如果用第一个方法的话,循环输出的那些DIV的ID一般是自己随便定义一个,还是直接使用例如数据库里记录的ID之类的信息?
之所以会这么问,是因为整个页面改好提交的时候,更新到数据库时,会需要这些数据的ID……数据的ID一般要怎样存在页面上呢?是用隐藏域还是直接设成DIV的ID?小弟是新手,被这些问题纠结了挺长时间了……因为总觉得把数据库里的ID直接显示到页面上不太好……

我觉得一个页面里的结构很复杂的话尽量不用ID,因为那样你得保证页面里ID的唯一性。你可以将1,2两种方法结合起来,输出div时,将你的DB里的数据ID加密后输出到页面(可以自定义属性,不一定非要叫id),然后用this来定位到该元素,修改时取到该属性再解密就可以和你的数据关联起来。