学生信息表格前端html,JS编程练习：管理学生信息的表格

管理学生信息的表格

tr:hover{

background:#f2f2f2;

}

tr ,tr, th, td{

border:solid 2px;

}

tr{

background:#fff;

}

function addStudent(){

var nm = prompt("请输入姓名: ", "小段");

var sex = prompt("请输入性别：", "女");

var love = prompt("请输入爱好：", "羽毛球");

var sextd = document.createElement("td");

sextd.innerHTML = sex;

var lovetd = document.createElement("td");

lovetd.innerHTML = love;

var nametd = document.createElement("td");

nametd.innerHTML = nm;

var newtr = document.createElement("tr");

newtr.setAttribute("onclick","trChick(this)");

newtr.appendChild(nametd);

newtr.appendChild(sextd);

newtr.appendChild(lovetd);

var tbody0 = document.getElementById("tbody0");

tbody0.appendChild(newtr);

}

function deleteStudent(){

var tbody0 = document.getElementById("tbody0");

var tbody0childs = tbody0.childNodes;

for(var i = 0;i < tbody0childs.length; i++)//判断有哪些行被选中

{

//alert(tbody0childs[i].bgColor);

if(tbody0childs[i].bgColor == "#f00"){ //判断该行是否被选中

tbody0.removeChild(tbody0childs[i]);

tbody0childs[i] = null;

i -= 1; //由于上一句销毁了子节点，tbody0childs数组中以后子节点会全部往前挪动。

//alert("删除成功");

}

}

}

function trChick(obj){

//var selecttr = obj.parentNode;

selecttr = obj;

selecttr.style.background="#f00";//设置背景色为红色

selecttr.bgColor="#f00";//一个简单的标志，表示该行被选中，该方法很丑陋，希望大神能不吝赐教。

//alert(selecttr.bgColor);

}

姓名	性别	爱好
小敏	女	微笑