国服第一前端狗
2016-05-13 19:02
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 type="text/javascript">
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;
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");
tab.appendChild(tr);
tr.appendChild(xh);
tr.appendChild(xm);
tr.appendChild(del);
var tr = document.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
bgcChange(tr[i]);
}
}
// 创建删除函数
function del(obj) {
var oTr = obj.parentNode.parentNode;
oTr.parentNode.removeChild(oTr);
}
</script>
JavaScript进阶篇
468192 学习 · 21891 问题
相似问题