css样式：
<style>
a{
text-decoration: none;
color:grey;
}
a:hover{
color: red;
}
table{
width: 700px;
height: 180px;
border-collapse: collapse;
padding:10px 5px;
text-align: center;
border-color: white;
font-family:"黑体";
}
</style>body：
<body>
<table border="1px">
<caption>学生信息</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>手机</th>
<th>地址</th>
<th>班级</th>
<th>操作</th>
</tr>
<tr id="tr1">
<td>1</td>
<td>王明</td>
<td>男</td>
<td>1234568792</td>
<td>十三大街</td>
<td>蓝桥一期</td>
<td><a class="modify"> 修改 </a><a class="remove"> 删除 </a></td>
</tr>
<tr id="tr2">
<td>2</td>
<td>小花</td>
<td>女</td>
<td>1234568792</td>
<td>十三大街</td>
<td>蓝桥一期</td>
<td><a class="modify"> 修改 </a><a class="remove"> 删除 </a></td>
</tr>
<tr id="tr3">
<td>3</td>
<td>小明</td>
<td>男</td>
<td>1234568792</td>
<td>十三大街</td>
<td>蓝桥一期</td>
<td><a class="modify"> 修改 </a><a class="remove"> 删除 </a></td>
</tr>
</table>
</body>引入jQuery文件：
<script src="../js/jquery-1.11.0.js"></script>自己编写的js：
<script>
$("th").css({"background-color":"dimgray","color":"white"});
$("tr:odd").css("background-color","#DCDCDC");
$("tr:even").css("background-color","whitesmoke");
$(".modify").click(function(){
$(this).parent().siblings("td").each(function()//找同类元素td
{
var is_text = $(this).find("input:text");//判断单元格下是否含有文本框
if (!is_text.length) {
$(this).html("<input size='13' type='text' value=' "+$(this).text()+" ' />");
}
else
$(this).html(is_text.val());
})
});
$(".remove").click(function(){
if(window.confirm("您确定要删除数据吗?"))
{
$(this).parent().parent().remove();
}
});
</script>运行结果：
