javascript对象相本图片的删除、修改和增加操作

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/

javascript对象相本图片的删除、修改和增加操作

相关推荐