表格学⽣表html,js编程练习:制作⼀个表格,显⽰班级的学⽣
信息。
要求:
⿏标移到不同⾏上时背景⾊改为蓝⾊,移开⿏标时则恢复为原背景⾊ ⽩⾊
点击添加按钮,能动态在最后添加⼀⾏
点击删除按钮,则删除当前⾏
new document
// ⿏标移动改变背景,可以通过给每⾏绑定⿏标移上事件和⿏标移除事件来改变所在⾏背景⾊。
var rows = ElementsByTagName("tr");
for(var i=0; i
makeChange(rows[i]);
}
}
function makeChange(obj){
html表格元素changeColor(this);
}
clearColor(this);
}
}
function changeColor(x){
x.style.backgroundColor = "blue";
}
function clearColor(x){
x.style.backgroundColor = "white";
}
// 编写⼀个函数,供添加按钮调⽤,动态在表格的最后⼀⾏添加⼦节点;
var number = 3;
var a=1;
function addRow(){
var table = ElementById('table');
var tr = ateElement("tr");
var td1 = ateElement("td");
var id = ateTextNode("xh00" + number++);
td1.appendChild(id);
var td2 = ateElement("td");
var name = ateTextNode("机器" + a++);
td2.appendChild(name);
var td3 = ateElement("td");
var func = ateElement("a");
func.innerText = "删除";
func.href = "javascript:void(0)";
td3.appendChild(func);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
makeChange(tr);
table.appendChild(tr);
}
// 创建删除函数
function dele(obj){
var t= obj.parentNode.parentNode.parentNode;
}
学号姓名操作xh001王⼩明删除xh002刘⼩芳删除

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。