首页手记表格：增加、删除行，鼠标移动变行背景色，行内文本框自适...

表格：增加、删除行，鼠标移动变行背景色，行内文本框自适应td，a除下划线

标签：

Html/CSS JavaScript

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html
<html>
<head>
<title>
编程挑战
</title>
<meta http-equiv="Content-Type" content="text/html  charset=utf=8">
<style type="text/css">
</style>
<style type="text/css">
a{
text-decoration:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
    Highlight();
}
function addOne()
{
    var tbody = document.getElementById("table").lastChild;
    var tr = document.createElement("tr");

    var td = document.createElement("td");
    td.innerHTML = "<input type='text' style='border:none;width:100%;height:100%'>";
    tr.appendChild(td);

    td =document.createElement("td");
    td.innerHTML = "<input type='text' style='border:none;width:100%;height:100%'>"
    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;
    var trs = tbody.getElementsByTagName("tr");
    for(var i=1;i<trs.length;i++)
        {
         trs[i].onmouseover = function(){
             this.style.backgroundColor = "red";
         }
         trs[i].onmouseout = function(){
             this.style.backgroundColor = "#fff";
         }
        }
}
</script>
</head>
<body>
<table  border="1" width="50%" height="50%" id="table">
    <tr>
       <th>学号</th>
       <th>姓名</th>
       <th>操作</th>
    </tr>
    <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
    </tr>
    <tr>
       <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
    </tr>
</table>
<input type="button" value="添加一行" onclick="addOne()">
</body>
</html>

点击查看更多内容