一道DOM操作题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一道DOM操作题相关的知识，希望对你有一定的参考价值。
创建一个表格，表头为姓名，性别，年龄，班级
1. 点击单元格内的内容，弹窗输入值，修改单元格内原有数据；
2. 设置加粗，标红按钮，在修改完单元格内容后显示按钮并能够对修改的内容进行样式改变；
3. 设置添加按钮，点击添加一行新的单元格（4个）；
代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style>//首先在head标签中设置了表格样式，以及两个按钮的隐藏 7 td{ 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操作题的主要内容，如果未能解决你的问题，请参考以下文章