表格的添加与删除
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border id="table">
<tr>
<td><input type="checkbox" onclick="fn1(this.checked)"></td>
<td>商品名字</td>
<td>商品价格</td>
<td>商品操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
</table>
<script>
var fn1=(status)=>{
var is=document.getElementsByTagName("input")
for(let i of is){
i.checked=status
}
}
function load() {
for(let i of document.querySelectorAll("td button")){
i.onclick=del
}
}
function del() {
var tr=this.parentElement.parentElement
tr.outerHTML=""
}
function delLast(){
if(table.rows.length>1)
table.deleteRow(-1)
}
function delAll() {
while(table.rows.length>1){
table.deleteRow(-1)
}
}
function addRow() {
var tr=table.insertRow()
var d1=tr.insertCell()
var d2=tr.insertCell()
var d3=tr.insertCell()
var d4=tr.insertCell()
d1.innerHTML='<input type="checkbox">'
d2.textContent="🍉🍉🍉🍉🍉"
d3.textContent="90.0"
d4.innerHTML="<button>删除</button>"
load()
}
load()
</script>
<button onclick="delLast()">删除表格最后一行</button>
<button onclick="delAll()">删除表格所有数据</button>
<button onclick="addRow()">增加表格数据</button>
</body>
</html>图片的增删与复制
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<img src="img/1.gif" alt="">
<img id="img" src="img/2.gif" alt="">
<img src="img/3.gif" alt="">
</div>
<script>
console.log(img.parentElement)
img.parentElement.style.background="yellow"
console.log(div.children);
console.log(div.children.length);
console.log(div.childElementCount);
console.log(div.firstElementChild,div.lastElementChild)
console.log(img.previousElementSibling)
console.log(img.nextElementSibling)
function fn2() {
var i=document.createElement("img")
i.src="img/4.gif"
div.appendChild(i)
}
function fn3() {
var i=div.lastElementChild
div.removeChild(i)
}
function fn4() {
var d=div.cloneNode(true)
d.setAttribute("id","")
document.body.appendChild(d)
}
</script>
<button onclick="fn2()">增加一张图片</button>
<button onclick="fn3()">删除一张图片</button>
<button onclick="fn4()">复制div</button>
</body>
</html>今天的就到这里吧！！！
