开发者社区> 鋒o丫头> 正文

JS-DOM 综合练习-动态添加删除班级成绩表

简介: 费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽的那个点,是一个小石头拌的你,你起来是该哭还是该笑呢?只怪自己习武不精吧。 虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时,怎么修改背景颜色的问题。
+关注继续查看

费了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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
windows添加和删除服务
删除系统服务,记得一定要小心用。避免删错sc delete 服务名 加入服务: sc create 服务名 binPath= 路径 start= auto
447 0
DataGrid中添加删除确认对话框 (转)
DataGrid中添加删除确认对话框 在DataGrid的使用中,经常需要为删除按纽添加确认对话框,根据我的学习经验,总结了三种方法,原理都是在客户端为删除按纽添加脚本代码来实现删除前弹出确认对话框。
525 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
17796 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19059 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
8331 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18527 0
+关注
鋒o丫头
这里需要一句话点缀。
139
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载