题意:就是用Dom完成下面图片排的样式
首先在程序中添加一个images文件夹,里面放上十五张图片;
<head>
<title></title>
<style type="text/css">
Image
{
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function addnode() {
//添加照片
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'];
var a = 0;
var table = document.createElement('table');
var tbody = document.createElement('body');
for (var i = 0; i < 3; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 5; j++) {
var td = document.createElement('td');
var imgs = document.createElement('img');
imgs.setAttribute('src', 'image/' + array[a]);
td.appendChild(imgs);
tr.appendChild(td);
a++;
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);
}
function ReplacePicture() {
var picture = document.createElement('img');
picture.setAttribute('src', 'image/scenery.png');
var oldpicture = document.getElementsByTagName('img')[8];
oldpicture.parentNode.replaceChild(picture, oldpicture); //通用的
}
function RemovePicture() {
var pic = document.getElementsByTagName('img')[11];
pic.parentNode.removeChild(pic);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="图片显示" οnclick="addnode();"/>
<input id="Button2" type="button" value="替换图片" οnclick="ReplacePicture();"/><br/>
<input id="Button3" type="button" value="删除图片" οnclick="RemovePicture();"/>
</body>
程序运行时就会出现下面的结果,这应该是当我点击图片显示按钮时,出现下面的十五张图片,
当我点击替换图片按钮时,就可以看出第二行第四列的图片被换掉了;
当我点击删除图片按钮时,就可以明显的看出第三行的第二张图片被删除了。