<style type="text/css">
Image
{
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
//方法1：
function showimage() {
//方法1：利用最基本的方法：数组来添加到每个table里面
var array = ['0.jpg', '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']
var tablenode = document.createElement('table');
var tbody = document.createElement('tbody');
tablenode.setAttribute('width', '600px');
tablenode.setAttribute('height', '500px');
tablenode.setAttribute('border', '2px');
//从下面开始进行3行5列的内容
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', 'image2/' + array[count]);
tdnode.appendChild(imgnode);
trnode.appendChild(tdnode);
count++;
}
tbody.appendChild(trnode);
}
tablenode.appendChild(tbody);
document.body.appendChild(tablenode);
}
//1.将第2行第4列的图片替换成你自己的图片，不要使用setAttribute
function replacenode() {
var pnode = document.createElement('img');
pnode.setAttribute('src', 'image2/bao.jpg');
var oldnode = document.getElementsByTagName('img')[8];
oldnode.parentNode.replaceChild(pnode, oldnode);
}
//2.删除第3行第2列的图片
function removenode() {
var oldnode = document.getElementsByTagName('img')[11];
oldnode.parentNode.removeChild(oldnode);
}
</script>
<body>
<input id="Button1" type="button" value="创建图片相册" οnclick="showimage()"/>
<input id="Button2" type="button" value="修改图片相册" οnclick="replacenode()"/>
<input id="Button3" type="button" value="删除图片相册" οnclick="removenode()"/>
</body>
扫一扫
4023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
