编辑练习--动态表格
2014-12-25 10:09
127 查看
编程练习
制作一个表格,显示班级的学生信息。要求:
1. 鼠标移到不同行上时背景色改为色值为 #007aff,移开鼠标时则恢复为原背景色 #fff
2. 点击添加按钮,能动态在最后添加一行
3. 点击删除按钮,则删除当前行
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> window.onload = function(){ // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; // 创建删除函数 </script> </head> <body> <table border="1" width="50%" id="table"> <tr> <th>学号</th><th>姓名</th><th>操作</th> </tr> <tr> <td>xh001</td><td>王小明</td> <td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td><td>刘小芳</td> <td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" /> <!--在添加按钮上添加点击事件 --> </body> </html>
上面居然还有热心的提示:
提示: 1. 获取表格的行,getElementsByTagName 。 2. 使用for进行循环,为每行添加事件及背景颜色设置。
但是我不得不吐槽一下,这提示完全是一种误导。哎!这慕客讲师也是醉了。http://www.imooc.com/code/1636
如果用jquery来做的话,那是秒秒钟的事,但是这里,要求用原生的js来实现。
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf8"/> <script type="text/javascript"> window.onload = function(){ var table = document.getElementById('table'); // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 table.onmouseover = function(e){ var tr = e.target.parentNode; if(tr.tagName.toLowerCase()==='tr'){ var trs = tr.parentNode.children; //先移除同类样式 for(var i = trs.length-1;i>=0;i--){ if(trs[i].getAttribute('style')){ trs[i].style.backgroundColor = '#fff'; } } tr.style.backgroundColor = '#007aff'; } } table.onmouseout = function(e){ var tr = e.target.parentNode; if(tr.tagName.toLowerCase()==='tr'){ tr.style.backgroundColor = '#fff'; } } //按钮 var btn = document.getElementsByTagName('input')[0]; //添加操作 btn.onclick = function(){ createTr(table) } //删除操作 table.onclick = function(e){ var tag = e.target; if(tag.tagName.toLowerCase() === 'a'){ deleteTr(tag.parentNode.parentNode); } } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; function createTr(table){ var tr = document.createElement('tr'); tr.innerHTML = '<td></td><td></td><td><a href="javascript:;" >删除</a></td>'; table.appendChild(tr); } // 创建删除函数 function deleteTr(tr){ tr.parentNode.removeChild(tr); } </script> </head> <body> <table border="1" width="50%" id="table"> <tr> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> <tr> <td>xh001</td> <td>王小明</td> <td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" /> <!--在添加按钮上添加点击事件 --> </body> </html>
演示效果
演示结果发现表格中的行不可以改内容,原来忘了加contentEditable="true"这个属性了。非常强大的属性,加上它,1秒变输入框了。
相关文章推荐
- 编辑 Ext 表格(一)——— 动态添加删除行列
- 开发动态编辑的表格
- 刚搜集到的 HTML Javascript 控件集 做得非常好 大数据量也没有问题 包含 可编辑表格 Tree可动态拖放 页签 Tab Control 动态 select
- BOS项目练习(业务受理功能,快速录入工作单{datagrid数据表格编辑功能使用})
- jquery 版本的动态编辑表格 四
- jquery 版本的动态编辑表格 五
- ExtJs4开发动态编辑的表格
- 动态可编辑表格
- jquery创建可编辑的动态表格
- 框架 day52 BOS项目练习(业务受理功能,快速录入工作单{datagrid数据表格编辑功能使用})
- 开发动态编辑的表格
- jquery 版本的动态编辑表格 六
- 编辑 Ext 表格(一)——— 动态添加删除行列
- jquery 版本的动态编辑表格 七
- 生成一个可以编辑的表格,并可以动态地添加行
- jquery 版本的动态编辑表格 八
- 如何开发动态表格编辑功能
- 用JS实现动态删除表格行、列、双击编辑的代码
- javascript将table的td变为可编辑的input,实现表格动态编辑
- jquery实现动态表格编辑