listenlo
2016-04-29 17:11
window.onload = function () {
var tr = document.getElementsByTagName("tr");//?????????????????
for (var i = 0; i < tr.length; i++) { //?????????????????
bgcChange(tr[i]); //?????????????????
}
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
}
function bgcChange(obj) { //自定义参数及参数名;
obj.onmouseover = function () { //鼠标移到元素上出发事件;
obj.style.backgroundColor = "#f2f2f2"; //改变鼠标移到元素时的背景;
}
obj.onmouseout = function () { //鼠标离开元素;
obj.style.backgroundColor = "#fff"; //鼠标离开元素背景颜色为白;
}
}
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
var num = 2;//数量 2行表格
function add() {
num++;
var tr = document.createElement("tr");//创建一行
var xh = document.createElement("td");//创建一单元格
var xm = document.createElement("td");//在创建一单元格
xh.innerHTML = "xh00" + num;//获取所创建单元格内容
xm.innerHTML = "第" + num + "学生";//获取所创建单元格内容
var del = document.createElement("td");//创建一单元格
del.innerHTML = "<a href='javascript:;' onclick='del(this)' >删除</a>";//获取所创建单元格内容
var tab = document.getElementById("table");//获取table的id
tab.appendChild(tr);//为table添加节点元素“行”appendChild()指定节点的最后子节点添加子节点
tr.appendChild(xh);//为 tr 添加子节点“单元格”
tr.appendChild(xm);//为 tr 添加子节点“单元格”
tr.appendChild(del);//为 tr 添加子节点“单元格”
var tr = document.getElementsByTagName("tr");//返回带有指定标签的集合;
for (var i = 0; i < tr.length; i++) {
bgcChange(tr[i]); //?????????????????
}
}
// 创建删除函数
function del(obj) {
var tr = obj.parentNode.parentNode; //?????????????????
tr.parentNode.removeChild(tr); //?????????????????
}
window.onload = function () {
var tr = document.getElementsByTagName("tr");//获取标签名为tr的标签的集合
for (var i = 0; i < tr.length; i++) { //循环tr.length-1次,tr.length-1是获取到的tr标签的个数
bgcChange(tr[i]); //对tr标签执行函数bgcChange,tr[i]作为参数,比如循环第一次,i=0,tr[0]就是第一个tr标签,第一个标签作为参数传入bgcChange函数
}
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
}
function bgcChange(obj) { //自定义参数及参数名;
obj.onmouseover = function () { //鼠标移到元素上出发事件;
obj.style.backgroundColor = "#f2f2f2"; //改变鼠标移到元素时的背景;
}
obj.onmouseout = function () { //鼠标离开元素;
obj.style.backgroundColor = "#fff"; //鼠标离开元素背景颜色为白;
}
}
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
var num = 2;//数量 2行表格
function add() {
num++;
var tr = document.createElement("tr");//创建一行
var xh = document.createElement("td");//创建一单元格
var xm = document.createElement("td");//在创建一单元格
xh.innerHTML = "xh00" + num;//获取所创建单元格内容
xm.innerHTML = "第" + num + "学生";//获取所创建单元格内容
var del = document.createElement("td");//创建一单元格
del.innerHTML = "<a href='javascript:;' onclick='del(this)' >删除</a>";//获取所创建单元格内容
var tab = document.getElementById("table");//获取table的id
tab.appendChild(tr);//为table添加节点元素“行”appendChild()指定节点的最后子节点添加子节点
tr.appendChild(xh);//为 tr 添加子节点“单元格”
tr.appendChild(xm);//为 tr 添加子节点“单元格”
tr.appendChild(del);//为 tr 添加子节点“单元格”
var tr = document.getElementsByTagName("tr");//返回带有指定标签的集合;
for (var i = 0; i < tr.length; i++) {
bgcChange(tr[i]); //对tr标签执行函数bgcChange,tr[i]作为参数,比如循环第一次,i=0,tr[0]就是第一个tr标签,第一个标签作为参数传入bgcChange函数
}
}
// 创建删除函数
function del(obj) {
var tr = obj.parentNode.parentNode; //定义一个变量叫tr,tr的值为获取到的参数的父元素的父元素,实际调用使用时,参数为a标签,a标签的父元素的父元素是tr标签,变量tr此时是tr标签
tr.parentNode.removeChild(tr); //变量tr的父元素删除子元素变量tr这个tr标签,就是删除自己这行
}
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题