慕课网javascript 进阶篇 第九章 编程练习
把平常撸的码来博客上再撸一遍既可以加深理解，又可以理清思维。还是很纯很纯的小白，各位看官老爷们，不要嫌弃。最近都是晚睡，昨晚也不例外，两点多睡的。故，八点起来的人不是很舒服，脑袋有点晕呼呼，鉴于昨晚看到了这章的编程练习，想着自己DOM编程艺术也差不多看完了，高级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>
看好了要求就开始撸吧。 先写个删除函数。
function del() {
var trnode=document.getElementsByTagName("tr");//取得所有tr元素节点(注意：是个数组);
for(var i=0;i<trnode.length;i++){
trnode[i].lastChild.onclick=function () { //用for循环对td的onclick事件进行绑定 注意绑定的td节点
//而不是tr节点
this.parentNode.parentNode.removeChild(this.parentNode);
//这个地方地方得用关键字this，关于为什么用this 而不是变量 i 不懂的可以去看我上一篇的那个案例
}
}
}
接下来添加tr标签：
function addone(){
var sumtr=document.getElementsByTagName('tr');//得到所有tr元素节点的数组;
var lasttr=sumtr[sum.length-1];//最后一个tr元素节点
var newtr=document.createElement('tr');//创建一个新的tr元素节点
var newtd1=document.createElement('td');//创建新的td标签
var newtd2=document.createElement('td');//创建新的td标签
var newtd3=document.createElement('td');//创建新的td标签
lasttr.appendChild(newtr);//把新建的tr标签添加到文本中
newtr.appendChild(newtd1);//把新建的td标签添加到文本中
newtr.appendChild(newtd2);//把新建的td标签添加到文本中
newtr.appendChild(newtd3);//把新建的td标签添加到文本中
// 好了 到这你可以把函数添加到文正去试试效果
// 好像并不是我们要的效果
//给newtd1 newtd2 添加个input 标签试试
// 给newtd3添加文本“删除” 还有a标签
newtd1.innerHTML="<input type='text' />";
ewtd2.innerHTML="<input type='text' />";
newtd3.innerHTML="<a href='javascript:;' onclick='del()'>删除 </a>";
//最后的最后把这个函数绑定到 删除 所在的标签上,onclick
}
剩下的就是backgroundColor了，撸吧：
function changecolor(){
var select=document.getElementsByTagName("tr");//得到所有的tr元素节点
for(i=0;i<select.length;i++){ //for循环遍历数组 绑定事
select[i].onmouseover=function () {
this.style.backgroundColor="#f2f2f2";
} // 用this的原理 一模一样 遍历的绑定事件中都用this
select[i].onmouseout=function () {
this.style.backgroundColor="#fff";//再绑定个鼠标out的事件
}
}
}
//最后的最后得考虑个问题 如果我把这个changecolor()函数放在windo.onload的那个匿名函数里，那我这个改变背景颜色的函数
只会执行一次，
那我后面创建出来的tr是不是就改变不了背景颜色了，答案是肯定改变不了的， 那我就得想办法了，这个得去好好想想，想到了就是自己的，
深刻点嘛。
因为创建tr的那个函数 只要创建一个tr就要运行一次 那我把这个改变backgroundColor()的函数在他里面调用不就可以了吗？ end。
整理如下：
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/> </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:;" onclick="del()" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr> <tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="del()">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr> </table>
<input type="button" value="添加一行" onclick="addOne()" /> <!--在添加按钮上添加点击事件 --> <script type="text/javascript"> window.onload = function(){
changecolor(); // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 }
function changecolor(){
var select=document.getElementsByTagName("tr");
for(i=0;i<select.length;i++){ select[i].onmouseover=function () {
this.style.backgroundColor="#f2f2f2";
}
select[i].onmouseout=function () {
this.style.backgroundColor="#fff";
}
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点； function addOne(obj){
var sumtr=document.getElementsByTagName("tr");
var lasttr=sumtr[sumtr.length-1];
var newtr=document.createElement("tr");
var newtd1=document.createElement("td");
newtd1.innerHTML="<input type='text' />";
var newtd2=document.createElement("td");
newtd2.innerHTML="<input type='text' />";
var newtd3=document.createElement("td");
newtd3.innerHTML="<a href='javascript:;' onclick='del()'>删除</a>";
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);
newtr.appendChild(newtd3);
lasttr.parentNode.appendChild(newtr);
changecolor();
}
// 创建删除函数
function del() {
var trnode=document.getElementsByTagName("tr");
for(var i=0;i<trnode.length;i++){
trnode[i].lastChild.onclick=function () { this.parentNode.parentNode.removeChild(this.parentNode);
}
}
}
</script>
</body>
慕课网javascript 进阶篇 第九章 编程练习的更多相关文章
- 慕课网JavaScript入门篇课程笔记
1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...
- JavaScript进阶 - 第10章 编程挑战
10-1 编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图:
- JavaScript进阶 - 第1章 系好安全带,准备启航
第1章 系好安全带,准备启航 1-1让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂 ...
- 4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
- javascript进阶课程--第二章--对象
javascript进阶课程--第二章--对象 学习要点 理解面向对象的概念 掌握对象的创建方法 掌握继承的概念和实现方法 基本概念 对象究竟是什么?什么叫面向对象编程? 对象是从我们现实生活中抽象出 ...
- javascript进阶教程第二章对象案例实战
javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...
- ＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
- javascript进阶课程--第一章--函数
javascript进阶课程--第一章--函数 学习要点 了解内存管理 掌握全局函数的使用 知识点 基本类型和引用类型 基本类型值有:undefined,NUll,Boolean,Number和Str ...
- javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...
随机推荐
- MySQL server has gone away 错误处理
解决方案1: 这个是mysql自身的一个机制: mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决办法有两个: 1.修改mysql 配置 增 ...
- LINUX系统配置相关
修改系统引导文件 grub.cfg的文件位置 /boot/grub/grub.cfg set default="4" 默认windows是在第四个选项 set timeout ...
- jar命令：打包、查看、更新等
如何把写好的Java程序打包为jar文件呢?下面说的就是java使用命令行打包JAR的方法 1.命令行的方式:打包jar cf JAR文件名称 程序文件名称或者程序所在的文件夹举例:jar cf My ...
- Android Studio Gradle编译时『No resource found that matches the given name』解决方法（windows系统的坑）
* 最近帮团队同事配置gradle时,发现一个非常奇怪的问题:> * 同样的gradle配置的项目,只是修改了一个项目的名称,竟然会出现以下奇怪问题: ## 现象1. 一个编译完全OK,另外一个 ...
- 「日常训练」 Soldier and Number Game (CFR304D2D)
题意 (Codeforces 546D) 给定一个数x=a!b!" role="presentation">x=a!b!x=a!b!的形式,问其中有几个质因数. 分 ...
- 杀死 tomcat 进程的脚本
新建一个.sh 文件 把下面的内容复制进去.然后 把这个文件放到tomcat 的bin目录下在关闭tomcat 执行这个脚本. 可以解决 在关闭tomcat的时候 总是遗留一些tomcat进程没有结束 ...
- bam文件测序深度统计-bamdst
最近接触的数据都是靶向测序,或者全外测序的数据.对数据的覆盖深度及靶向捕获效率的评估成为了数据质量监控中必不可少的一环. 以前都是用samtools depth 算出单碱基的深度后,用perl来进行深 ...
- Selenium 启动无头浏览器，只有chrome 和 firefox的，没有IE
使用无头浏览器,可以避免掉不确定的弹出框对脚本稳定性的影响,还能在脚本执行过程中省略掉了css 加载的时间. 以下是Selenium 启动无头浏览器的方法,只有chrome 和 firefox的. p ...
- 基于语音转录的ted演讲推荐
论文地址:https://arxiv.org/abs/1809.05350v1 二. 实现 我们从Kaggle[6]中获取了TED演讲数据集,其中包括2400个TED演讲的数据,包括标题.演讲者.标 ...
- 目标检测之Faster-RCNN的pytorch代码详解(数据预处理篇)
首先贴上代码原作者的github:https://github.com/chenyuntc/simple-faster-rcnn-pytorch(非代码作者,博文只解释代码) 今天看完了simple- ...