JS-DOM 综合练习-动态添加删除班级成绩表
费了2个小时，才把原理弄懂，把问题逐个解决，当你发现你最后栽的那个点，是一个小石头拌的你，你起来是该哭还是该笑呢？只怪自己习武不精吧。
虽然问题都解决了，但是还有一个余留的问题就是鼠标经过input时，怎么修改背景颜色的问题。
这一节有点乱，虽然整理的代码编了问题序号。可我相信，再过几天自己回头看肯定还是一头雾水。
so,附上具体问题网址：http://www.imooc.com/code/1636
以下是html整件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom对象综合练习</title>
<style type="text/css">
table {
margin: 0 auto;
}
td {
text-align: center;
}
input {
width: 30%;
margin-top: 5px;
cursor: pointer;
}
</style>
<script type="text/javascript">
//【1 】鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
//！难点问题1-3！！window.onload在最上面，也是页面加载完成后执行的效果，就和我之前做ZTA官网的bug一样了，那么后添加的就不能执行onmouseover的变色函数了。那该怎么办，后添加的东西怎么再调用这个已经加载好的函数？把函数放到下面起作用吗？很明显，不行，即使放到下面，也是只有加载进来的这两行html中已经写好的tr会执行变色函数，你利用添加button后添加的还是不能调用。，那么就把变色函数封装到一个函数中，放到最下面，然后window.onload还是在最上面，以保证页面加载完成后首先调用函数让已经存在的两行能够执行变色命令，但是封装的变色函数除了在window.onload下调用一次，在添加函数内部，也得调用一次，这样新添加的函数就能够执行变色函数了。
/* 1-3解决前的：旧代码块
* window.onload = function() {
var table = document.getElementById('table');
var tr = document.getElementsByTagName('tr');
// if(){
//
// }1-1问题：本来还打算用if判断，让i不是0的时候再执行函数，后来想想，直接把i的初始值改为1，把第一行排除掉不就行了。
for(var i = 1; i < tr.length; i++) { //1-1解决：i=1,是为了排除第一排的表头，你可以把i=0，然后把鼠标放到学号那一行，就知道为什么改1了
tr[i].onmouseover = function() {
this.style.backgroundColor = "red";
}
tr[i].onmouseout = function() {
this.style.backgroundColor = "white"; //1-2问题及解决：white也可以，最好是none，但是换none不起作用不知道是不是不该加引号。测试后，不加引号的none是undefined，算了，直接white把、正常的背景色。
}
}
// alert(tr);用tagname得到的是一个集合！！！关键点！！
}
*/
//【新代码块】1-3得以解决
window.onload = function(){
bianse();
}//实现一开始就调用变色函数，让本来就有的tr先用着
var bianse = function(){
var table = document.getElementById('table');
var tr = document.getElementsByTagName('tr');
// alert(tr.length);
for(var i = 1; i<tr.length;i++){
tr[i].onmouseover = function(){
this.style.backgroundColor = "red";
// this.childNodes.style.backgroundColor = "red";//想着怎么解决后添加的input框的背景颜色
}
tr[i].onmouseout = function(){
this.style.backgroundColor = "white";
}
}
}
// 【2】编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function append() {
var table = document.getElementById('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
// var j=0;
// do {
// tr.appendChild(td);
// j++;
// } while (j<3)//2-2：试图一次性添加三行，不成功.后来看参考代码，就是连着appendchils三次就行了、
//td.innerHTML = "删除"//2-3：思路都是对的，就差那么一点变通，就是添加了的td是空的，怎么把它撑开的问题，参开代码是用iNput type="text"解决的，没想到，不过想想还有别的方法吗？那就是链接数据库了？把提交的数据传进去以后不调用这个函数，调用后台的数据，把td的内容innerHTML来等于后台的代码
td.innerHTML = "<input type='text' />";
tr.appendChild(td);
td =document.createElement('td');//2-2解决：又创建了一个td单元格
td.innerHTML = "<input type='text' style='border: none;width: 100%;height: 100%;'/>";//2-3解决：给列里面插入一个单元格，，把列撑起来、然后借鉴第一个单元格的样式，这里改进为把border去掉，显性上，只是一个单元格，隐形上，还有一个input框，但是因为input的范围太窄小，改成了尊重父元素td的大小。这样。，鼠标在单元格哪里点击都可以输入信息。
tr.appendChild(td);
td = document.createElement('td');//2-2 添加第三个td
//td.innerHTML = "删除";//2-4：这样删除调用不了删除函数，那就利用添加input的道理，添加一个html中一样的a标签，然后a标签内有点击事件触发删除函数。
td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";//2-4解决<a href="javascript:;" onclick="deleteRow(this)">删除</a>
tr.appendChild(td);
// table.appendChild(tr);//2-5，tr添加给了他的爷爷table。
table.lastChild.appendChild(tr);//2-5解决，改户口给tr的爸爸tbody
bianse();//解决了1-3的问题，给后添加的内容调用变色函数（又生了一个新问题：这里的不足之处是，text文本框没办法变色。至今没有解决，2-1尝试解决失败）
}
// 【3】创建删除函数
//遇到的难点
//1.删除地方的a链接哪里不会接函数调用，打算写JavaScript:del();来着，但是w3c不提倡，改成onclick=“del()";再然后发现，()里还要传参数；
//2 obj是传进来的参数，但是他传的是什么呢？this，就是<a>,那么要实现删除的话，就要找到<tr>,就要找父节点
//高了半天不对，是onclick拼错了。oncilck。我说怎么deleteRow(this)地方不变色呢
//3，就是找到正确的tr的位置，然后删除，这里大家都说还有一个隐藏的tbody，究竟是什么不讲理的东西？被注销的代码都是在寻找需要删除的那个tr.正解如下面的3-1,3-2,3-3
//4，也找到爸爸了，也能删除了，可是新增加的tr行不能实现删除函数的调用可咋办？
function deleteRow(obj) {
var table1 = document.getElementById('table');
// alert(table1.lastChild);
var tbody = table1.lastChild;
var tr = obj.parentNode.parentNode;
//下面这是赤裸裸的滴血认亲啊！
//alert(tbody);//3-3:得到TableSecondElement。证明他就是table和tr之间的那个隐形标签，而且，他就是tr的父亲。那么要想删除这一行的tr，就得用父元素.removeChild(tr)；这么个形式，代码如下。所以，这里找到tr的爸爸是关键。
tbody.removeChild(tr);
//4-1.新增的不能删除，最后经过排查，是因为新增的不是tbody的孩子，也就是说，你孩子当时上的户口没在tbody的名下，进而说明，是添加tr的时候除了问题。那就去添加函数中找吧。最后发现2-5处，你添加的tr是添加给了table，也就是说生下来的孩子户口上给了爷爷，法律上讲，他和table是父子关系，真正的爸爸tbody，却成了tr的哥哥，自然也就不能通过tbody来删除他名义下的对应的tr子元素。注意关键点：<table><tbody><tr></tr></tbody></table>
//1次错误摸索
//alert(tr.parentNode);//3-1:是TableSecondElement，而不是table。看来果真还有一层
// for(var i = 0;i<tr.length;i++){
// alert(tr[i]);
// }
//table1.removeChild(tr);//3-2:tr不是table1的孩子，证明，table和tr之间还有一个没写出来的tbody，如上3-1实验
//2次错误摸索
// var tbody = document.getElementById
//
// ('table').lastChild; //对应的是table中tbody标签
//
// var tr = obj.parentNode.parentNode;
//
// tbody.removeChild(tr);
}
//3次错误摸索
// var table1 = document.getElementById('table');
// var table2 = document.getElementsByTagName("table");
// alert(table2);
// alert(table2.length);
// alert(table2[0]);
//// alert(typeof table1);
// var childs = table1.childNodes;
// alert(childs.length);
</script>
<!--参考代码-->
<!--
<script type="text/javascript">
window.onload = function() {
Highlight();
}
function addOne(obj) {
var tbody = document.getElementById('table').lastChild;
var tr = document.createElement('tr');
var td = document.createElement("td");
td.innerHTML = "<input type='text'/>";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "<input type='text'/>";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";
tr.appendChild(td);
tbody.appendChild(tr);
Highlight();
}
function deleteRow(obj) {
var tbody = document.getElementById('table').lastChild;
var tr = obj.parentNode.parentNode;
tbody.removeChild(tr);
}
function Highlight() {
var tbody = document.getElementById('table').lastChild;
trs = tbody.getElementsByTagName('tr');
for(var i = 1; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.style.backgroundColor = "#f2f2f2";
}
trs[i].onmouseout = function() {
this.style.backgroundColor = "#fff";
}
}
}
</script>
-->
</head>
<body>
<table border="1" width="90%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td>
<a href="javascript:;" onclick="deleteRow(this)">删除</a>
<!--在删除按钮上添加点击事件 -->
</td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td>
<a href="javascript:;" onclick="deleteRow(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
</table>
<div style="text-align: center;">
<input type="button" value="添加一行" onclick="append()" />
<!--在添加按钮上添加点击事件 -->
</div>
<!--
------------实验 onclick传参-------------
<input type="button" value="删除" onclick="deleteThis(this) "/>
<script>
function deleteThis(obj){
alert(obj.value);//就是删除
}
</script>-->
</body>
</html>
JS-DOM 综合练习-动态添加删除班级成绩表的更多相关文章
- 在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- js实现网页收藏功能，动态添加删除网址
<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...
- 编辑 Ext 表格（一）——— 动态添加删除行列
一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行 gridS ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 将HTML字符转换为DOM节点并动态添加到文档中
将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...
- 如果dom节点是动态添加进页面的，在页面节点绑定事件如何解决的问题。
如果dom节点是动态添加进页面,想在节点绑定事件,传统的做法就是遍历节点,但会出现问题,也肯能有其他的办法,突然想到 可以依据事件冒泡,这样就不惧页面后添加节点而不响应事件的问题.比较结实.示例代码如 ...
随机推荐
- Bootstrap系列 -- 40. 导航条二级菜单
在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> < ...
- Web Api 2 接口API文档美化
使用用第三方提供的swgger ui 帮助提高 web api 接口列表的阅读性,并且可以在页面中测试服务接口. 运行程序如下: 注意:在IE中必须输入红色部分. 并且可以对方法进行测试. 在开发we ...
- Overlay network 覆盖网络
From Wikipedia, the free encyclopedia An overlay network is a computer network that is built on top ...
- 【JavaEE企业应用实战学习记录】struts配置文件详细解析
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...
- iOS-- 快速集成iOS基于RTMP的视频推流
效果图 iTools有点卡, 但是推到服务器倒是很快的. 推流 前言 这篇blog是iOS视频直播初窥:<喵播APP>的一个补充. 因为之前传到github上的项目中没有集成视频的推流.有 ...
- 十天冲刺---Day9
站立式会议 站立式会议内容总结: 燃尽图 照片 队员们都回来了,写完之后继续对alpha版本进行迭代. 希望演示的时候能拿得出来.
- Oracle报 ORA-00054资源正忙的解决办法
来源于:http://www.cnblogs.com/loveLearning/p/3625544.html oracle之报错:ORA-00054: 资源正忙,要求指定 NOWAIT 问题如下: S ...
- Mysql-windows下修改密码
忘记密码修改(以下各种方法视情况而使用,本人测试,有些都是案情况才可行,但都是有设置成功过) 注:修改密码成功后一定要记得刷新下权限(否则将导致不能使用当前用户连接) mysql>FLUSH P ...
- MVC 基架不支持 Entity Framework 6 或更高版本
MVC 基架不支持 Entity Framework 6 或更高版本.有关详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=276833. PS:新做一个 ...
- 机器学习Python包
随着机器学习的逐日升温,各种相关开源包也是层出不群,面对如此多种类的工具包,该如何选择,有的甚至还知之甚少或者不知呢,本文简单汇总了一下当下使用比较多的Python版本机器学习工具包,供大家参看,还很 ...