文章目錄
簡介
表格增加刪除，效果如下圖
樣式屬性案例
簡介
DOM---表格添加刪除，樣式屬性案例
表格增加刪除，效果如下圖
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圖書表格操作</title><script>function addNode(){// 獲取表格對象var tab = document.getElementById('tab')// 創建tr，td節點var tr = document.createElement('tr')var td1 = document.createElement('td')td1.innerHTML="<input type='text' size='10px' onblur='seaveVal(this)'/>" //此時的節點是input，父節點是tdvar td2 = document.createElement('td')td2.innerHTML="<input type='text'size='10px' onblur='seaveVal(this)'/>"var td3 = document.createElement('td')td3.innerHTML=" <input type='button' value='添加' onclick='addNode()'/>"+"<input type='button' value='刪除' onclick='removeNode(this)' />"//將創建的節點加入表格中tab.appendChild(tr)tr.appendChild(td1)tr.appendChild(td2)tr.appendChild(td3)}//獲取父節點function seaveVal(thi){var td = thi.parentNodetd.innerText=thi.value}//刪除節點，可以用節點的 父節點td的 父節點tr刪除function removeNode(thi){var tr = thi.parentNode.parentNodetr.remove()}</script> </head> <body><table border="2px" align="center" id="tab"><tr><th >圖書名稱</th><th>作者</th><th>操作</th></tr><tr><td>活著</td><td>余華</td><td><input type="button" value="添加" onclick="addNode()"><input type="button" value="刪除" onclick="removeNode(this)"></td></tr><tr><td>城南舊事</td><td>林海音</td><td><input type="button" value="添加" onclick="addNode()"><input type="button" value="刪除" onclick="removeNode(this)"></td></tr></table></body> </html>
樣式屬性案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM-樣式屬性案例</title><style>body{background-image: url('Camera Roll/b4.jpg'); background-repeat: no-repeat;background-size: 1920px 800px;}.div1{width: 200px;height: 200px;background-color: rgb(109, 129, 122);text-align: center;align-content: center;}input{width: 40px;height: 30px;}</style><script>var i=-1function changebc(){var arr = ["b1.jpg","b2.jpg","b3.jpg"]if (i<arr.length-1){i++;}else{i=0;}document.body.style.backgroundImage="url('Camera Roll/"+arr[i]+"')"}function changeno(){// 獲得標簽var div1 = document.getElementById('div_1');div1.style.marginTop = Math.random()*500+"px";div1.style.marginLeft = Math.random()*800+"px";}function changeye(){document.body.style.backgroundImage = "url('Camera Roll/b1.jpg')";// 等200毫秒后再隱藏 div_1setTimeout(function () {document.getElementById('div_1').style.display = "none";}, 200); // 延遲時間可調}</script>
</head>
<body><a href="javascript:changebc()">點擊更換主頁</a><div class="div1" id="div_1"><h3>背景好看嗎</h3><input type="button" value="是" onclick="changeye()"><input type="button" value="否" onmouseover="changeno()"></div></body>
</html>
（list列表基礎教程）（STL基礎知識）)
