一道DOM操作題
阿新 • • 發佈：2017-10-17
doc one mov inner 獲取 以及 button charset cells
創建一個表格，表頭為姓名，性別，年齡，班級
1. 點擊單元格內的內容，彈窗輸入值，修改單元格內原有數據；
2. 設置加粗，標紅按鈕，在修改完單元格內容後顯示按鈕並能夠對修改的內容進行樣式改變；
3. 設置添加按鈕，點擊添加一行新的單元格（4個）；
代碼如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <style>//首先在head標簽中設置了表格樣式，以及兩個按鈕的隱藏 7td{ 8 height: 50px; 9 text-align: center; 10 } 11 table{ 12 margin: auto; 13 width: 80%; 14 } 15 .button{ 16 visibility: hidden; 17 } 18 </style> 19 </head> 20 21 <body> 22 <script> 23 var td_obj;//一個全局變量 24 //第一個函數設置為點擊彈窗修改內容，但其中包含了幾條作用於其他函數的設置，多個函數之間相互都有關聯 25 function one(obj){ 26 td_obj = obj;//此行為加粗標紅按鈕設置，使這兩個按鈕只對當前修改的單元格內容起效 27 obj.innerHTML = prompt("");//彈窗 28 //obj.setAttribute("abc","q"); //給所有td標簽一個自定義屬性，為了實現標紅加粗兩個按鈕的功能而設置，是另一種方法，下文中被註釋掉的代碼 29 document.getElementById("bold").style.visibility = "visible";//點擊修改後顯示兩個按鈕 30 document.getElementById("red").style.visibility = "visible"; 31 32 } 33 //第二個函數設置為添加單元格 34 function two(){ 35 var a = document.getElementById("table");//獲取表格元素 36 var b = document.createElement("tr");//獲取行元素 37 //4個單元格利用for循環循環添加，使一行中有4個單元格 38 for(i=0;i<4;i++){ 39 var c = document.createElement("td");//創建單元格 40 c.setAttribute("onClick","one(this)")//賦予單元格onClick屬性以及調用的函數 41 b.appendChild(c);//將創建的單元格追加至行 42 } 43 a.appendChild(b);//將循環完成的行添加至表格 44 } 45 //第三個函數設置加粗標紅按鈕的樣式 46 function three(obj){ 47 td_obj.style.fontWeight = "bold";//全局變量作用於此行 48 obj.style.visibility = "visible";//完成加粗後按鈕消失 49 //下面被註釋掉的代碼是另一種方法，比較麻煩，上面的是老師帶著他的高級裝備打怪的戰利品 - -！ 50 // var a = document.getElementsByTagName("td"); //get到所有td中的內容 51 // for(i=0;i<a.length;i++){ //利用for循環查找所有包含自定義屬性abc的td標簽 52 // var aa = a[i].getAttribute("abc"); 53 // if(aa == "q"){ //如果這個變量的值 == 自定義屬性abc的值q，則執行加粗變化 54 // a[i].style.fontWeight = "bold"; 55 // a[i].removeAttribute("abc"); //為了使加粗不會將所有的td內容改變，刪除已被修改內容的td標簽的自定義屬性abc，使abc屬性始終唯一的存在與一個td標簽中 56 // } 57 // } 58 } 59 function four(obj){ 60 td_obj.style.color = "red"; 61 // //obj.style.visibility = "visible"; 62 // var a = document.getElementsByTagName("td"); 63 // for(i=0;i<a.length;i++){ 64 // var aa = a[i].getAttribute("abc"); 65 // if(aa == "q"){ 66 // a[i].style.color = "red"; 67 // a[i].removeAttribute("abc"); 68 // } 69 // } 70 } 71 </script> 72 <button onClick="two()">添加</button> 73 <button class="button" id="bold" onClick="three(this)">加粗</button> 74 <button class="button" id="red" onClick="four(this)">標紅</button> 75 <table id="table" border="1" cellspacing="0"> 76 <tr> 77 <td>姓名</td> 78 <td>性別</td> 79 <td>年齡</td> 80 <td>班級</td> 81 </tr> 82 <tr> 83 <td onClick="one(this)">張三</td> 84 <td onClick="one(this)">男</td> 85 <td onClick="one(this)">15</td> 86 <td onClick="one(this)">101</td> 87 </tr> 88 </table> 89 </body> 90 </html>
總結：1、3兩個題目是自己想出來的，寫的也挺冗余，但是思路還算清晰，沒有費時太久，第2個題目是一點想法都沒有，在老師指導下，獲取所有td中的值傳給兩個按鈕並實現了題目要求
一道DOM操作題