首页手记 JS编程练习：管理学生信息的表格

JS编程练习：管理学生信息的表格

标签：

Html/CSS JavaScript

<!DOCTYPE HTML>
<html>
<head>
<title>管理学生信息的表格</title>
<style type="text/css">
 tr:hover{
    background:#f2f2f2;

}
tr ,tr, th, td{
    border:solid 2px;
}
tr{
    background:#fff;
} 
</style>

<script type="text/javascript">
  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);
    }

</script>
</head>
<body>

<table id="t0">
<tbody id="tbody0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr onclick="trChick(this)">
<td>小敏</td>
<td>女</td>
<td>微笑</td>
</tr>
<tbody>
</table>

</body>
<input type="button" value="添加学生" onclick="addStudent()"/>
<input type="button" value="删除学生" onclick="deleteStudent()">
</html>

点击查看更多内容