1、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> Image { width:100px; height:100px; } </style> <script type="text/javascript"> function chuangjian() {
2、 //添加图片 var array = ['1.门钙蹲茌jpg', '2.jpg&垆杪屑丝#39;, '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;
3、for (va筠续师诈r i = 0; i < 3; i++) { var trnode = document.creat髫潋啜缅eElement('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); }
4、// 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>
5、 下图为点击创建相册后所呈现页面效果。
6、 然后点击页面上方替换图片选项，替换页面中指定位置的图片，如下图所示。
7、点击页面上方的“删除节点”选项，删除页面中指定位置的图片的节点，如下图所示。
