你的位置:首页 > Java教程

[Java教程]javascript对象相册图片的删除、修改和增加操作


javascript对象相册图片的删除、修改和增加操作:
下面是一个对相册图片的操作代码,主要是对元素节点的操作,代码是从网络摘抄的,希望对大家有所帮助,因为没有图片,也就没有演示效果,不过应该还是很好理解的,在此基础上可以进行一定的扩展来实现我们想要的功能。

 

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /><head><title>蚂蚁部落</title><style type="text/css">image{ width:100px; height:100px;}</style><script type="text/javascript">function chuangjian(){  //添加图片 var array =['1.jpg',      '2.jpg',      '3.jpg',      '4.jpg',      '5.jpg',      '6.jpg',      '7.jpg',      '8.jpg',      '9.jpg',      '10.jpg',      '11.jpg',      '12.jpg',      '13.jpg',      '14.jpg',      '15.jpg'      ]; //alert(array.length); var tablenode = document.createElement('table'); var tbody = document.createElement('tbody'); tablenode.setAttribute('width', '600px'); tablenode.setAttribute('height', '400px'); tablenode.setAttribute('border', '2px'); var count = 0; for (var i = 0; i < 3; i++) {  var trnode = document.createElement('tr');  for (var j = 0; j < 5; j++) {   var tdnode = document.createElement('td');   var imgnode = document.createElement('img');   imgnode.setAttribute('src', 'picture/' + array[count]);   tdnode.appendChild(imgnode);   trnode.appendChild(tdnode);   count++;  }  tbody.appendChild(trnode);  }  tablenode.appendChild(tbody);  document.body.appendChild(tablenode); } //1.将第2行第4列的图片替换成你自己的图片,不要使用setAttribute function tihuan()  {  var pnode = document.createElement('img');  pnode.setAttribute('src', 'images/2.jpg');  var oldnode = document.getElementsByTagName('img')[8];  oldnode.parentNode.replaceChild(pnode, oldnode);  var oldnode = document.createElement('img'); } //2.删除第3行第2列的图片 function shanchu()  {  var oldnode = document.getElementsByTagName('img')[11];  oldnode.parentNode.removeChild(oldnode) }</script></head><body><input type="button" value="创建相册" onclick="chuangjian();" /><input type="button" value="替换图片" onclick="tihuan();" /><input type="button" value="删除节点" onclick="shanchu();" /></body></html>

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8170

更多内容可以参阅:http://www.softwhy.com/javascript/