dom中表格的修改 增加行例
Posted 落落无伤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dom中表格的修改 增加行例相关的知识，希望对你有一定的参考价值。
增加一行
| /* | |
| 添加一行 | |
| 1、找到父元素（往这里面添加元素） | |
| 2、创建元素 tr td | |
| 创建td元素 创建tr元素 | |
| 把td元素放到tr元素里面 | |
| 3、把tr放到父元素 | |
| */ | |
| function addcol(){ | |
| // 1、找到父元素（往这里面添加元素） | |
| var tableObj = document.getElementById("tab"); | |
| // 2、创建元素 tr td创建td元素 创建tr元素 | |
| var trObj = document.createElement("tr"); | |
| for(var i = 0; i<4;i++){ | |
| var tdObj = document.createElement("td"); | |
| tdObj.innerhtml = "李四"; | |
| // 把td元素放到tr元素里面 | |
| trObj.appendChild(tdObj); | |
| } | |
| // 3、把tr放到父元素 | |
| tableObj.appendChild(trObj); | |
| var div = document.getElementById("dd"); | |
| } |
点击修改输入的内容，并添加加粗，变红按钮。
| //window.onload = modTwo; | |
| /* | |
| 1、点击单元格内容 弹窗promrt接收值 将接受的值提换单元格内容 | |
| 2、点击单元格 出现2个按钮 加粗 字体颜色标红 | |
| 1、给点击的元素加属性 为了区分加粗的对象 | |
| 2、给按钮加点击事件 | |
| 3、找到元素，修改样式 | |
| 3、创建一行 | |
| */ | |
| /* | |
| 1、获取所有的td标签 | |
| 2、循环td 给每一个替代加上onclick属性 | |
| */ | |
| //给所有元素加onclick事件 | |
| function modTwo(){ | |
| var tdArr = document.getElementsByTagName("td"); | |
| for(var i = 0; i<tdArr.length;i++){ | |
| tdArr[i].setAttribute("onclick","modone(this)"); | |
| tdArr[i].style.cursor = "pointer"; | |
| } | |
| } | |
| /* | |
| 1、给单元格添加点击事件 | |
| 2、方法内逻辑，弹窗接收用户的输入。=>保存在一个变量里面 | |
| 3、找到要修改内容的单元格，通过操作内容把用户输入的值提换进去 | |
| */ | |
| var td_obj; | |
| //td的点击事件 | |
| function modone(obj){ | |
| td_obj = obj; | |
| //修改值 | |
| obj.innerHTML = prompt("输入要修改的值"); | |
| //按钮显示 | |
| var div = document.getElementById("dd"); | |
| div.style.display = "block"; | |
| //给本标签添加自定义属性 | |
| obj.setAttribute("abc","abc"); | |
| } | |
| //加粗按钮 | |
| function jc(){ | |
| //找到所有td | |
| var tdArr = document.getElementsByTagName("td"); | |
| for(var i = 0; i<tdArr.length;i++){ | |
| //找元素 | |
| var a = tdArr[i].getAttribute("abc"); | |
| if(a == "abc"){ | |
| tdArr[i].style.fontWeight = "bold"; | |
| tdArr[i].removeAttribute("abc"); | |
| } | |
| } | |
| } | |
| //字体变红按钮 | |
| function bh(){ | |
| //td_obj是全局变量 | |
| td_obj.style.color = "red"; | |
| //按钮显示 | |
| var div = document.getElementById("dd"); | |
| div.style.display = "none"; | |
| } |
| <body ><!-- onLoad="modTwo()" --> | |
| <button onClick="addcol()">添加一行</button> | |
| <table id="tab" border="1" width="80%" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <th>姓名</th> | |
| <th>性别</th> | |
| <th>年龄</th> | |
| <th>班级</th> | |
| </tr> | |
| <tr> | |
| <td>张三</td> | |
| <td>男</td> | |
| <td>15</td> | |
| <td>101</td> | |
| </tr> | |
| </table> | |
| <div id="dd" style=""> | |
| <button onClick="jc()">加粗</button> | |
| <button onClick="bh()">红色字体</button> | |
| </div> | |
| </body> |
以上是关于dom中表格的修改 增加行例的主要内容，如果未能解决你的问题，请参考以下文章