table中动态添加图片节点

最新推荐文章于 2022-03-22 16:34:39 发布

alvin_song

最新推荐文章于 2022-03-22 16:34:39 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/yuzhulinfeng/article/details/8253419

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做 ”follow” button,通过点击按钮，一旦用户在系统某一个模块中添加文件，管理员将会收到邮件。也就是说当currentuser点击follow按钮时，此时会在数据库中插入一条记录，当取消follow时，这条记录将在数据库中删除。在此过程中，当用户鼠标移动到follow按钮上时，可以看看该模块当前有多少人"follow",并且在上方将会显示follow用户的图像信息。

在此过程中具体有多少人follow，不清楚，所以采用动态添加元素节点的方法。

下面例子是一个简单的实例：

<html>
<title>dynamic add Node</title>
<div>
<table id="mytable">
</table>
</div>
<input type="button" value="add node" οnclick="add_node()"/>
</html>
<script>
   var obj_table=document.getElementById("mytable");//获取table对象
   var count=0; //控制计数
function add_node()
{
var tr_NodeElement=document.createElement("tr");//创建一个tr节点元素
var td_NodeElement=document.createElement("td"); //创建一个td节点元素
var a_NodeElement=document.createElement("a");//创建一个a节点元素
var image_NodeElements=document.createElement("img");//创建img节点元素

td_NodeElement.setAttribute("style","width:50px;height:50px;margin-left:10px;");//设置节点元素属性
a_NodeElement.setAttribute("style","cursor:pointer");//设置节点属性（href等）
image_NodeElements.setAttribute("src","pix.gif"); //设置image属性（title.......）
td_NodeElement.appendChild(a_NodeElement); //给td节点添加子节点a元素
a_NodeElement.appendChild(image_NodeElements); //给a节点添加子节点img元素
count=count%5;   //每行显示4张图片
if(count==0)
{
   tr_NodeElement.appendChild(td_NodeElement);
   obj_table.appendChild(tr_NodeElement);
   obj_tr=tr_NodeElement;
   count++;
   }
if(count<5)
{
obj_tr.appendChild(td_NodeElement);
count++;
}
}
</script>

该实例中，当点击一次将会添加一张图片，在此图片中我们可以设置链接属性等一系列操作.但是在实际过程中，我们通常是从数据库中获得所有的信息，如图片的用户名，图像信息等一系列属性，在此我们可以通过在数据库中获得相应的信息，形成相对应的数组。可以得到总数，只需将add_node()函数放在for(var i=0;i<total;i++){ }即可。如果当前用户点击“follow”时，此时当前用户的头像显示在第一位，可用节点的方法add/remove.