慕课网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(){
整理如下：<!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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-12-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
