首页 > 代码库 > 操作表格及右键删除
操作表格及右键删除
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息管理</title>
<script src="http://www.mamicode.com/js/try.js"></script>
<style>
body,table,tr,td,th,div,input{font-size:12px;}
.tr1{
background-color:#fff;
}
.tr2{
background-color:#ffcc66;
}
</style>
</head>
<body>
<center>
学号: <input type="text" id="stuid" name="stuid" size="3">
姓名: <input type="text" id="stuname" name="stuname" size="8">
出生日期: <select id="year" onchange="setDay()">
<script>
for(var i=1970;i<2010;i++){
document.write("<option value="http://www.mamicode.com/+i+">"+i+"</option>");
};
</script>
</select>年
<select id="month" onchange="setDay()">
<script>
for(var i=1;i<13;i++){
document.write("<option value="http://www.mamicode.com/+i+">"+i+"</option>");
}
</script>
</select>月
<select id="day">
<script>
for(var i=1;i<32;i++){
document.write("<option value="http://www.mamicode.com/+i+">"+i+"</option>")
}
</script>
</select>日
<br> <!-- 换行 -->
高考成绩： <input type="text" id="score" name="score" size="3">
<input type="button" value="http://www.mamicode.com/添加" onclick="addStu()">
<hr> <!-- 创建水平线 -->
<!-- 右键菜单 -->
<!-- 即当你鼠标右键时显示的一个div 默认是隐藏的 右键时显示 -->
<div id="contextMenu" style="position:absolute;padding:5px;width:70px;z-index:2;
background-color:#ccc;display:none;border:1px solid #000;">
<label style="cursor:pointer;" onclick="deleteRow()">删除</label>
</div>
<!-- 关闭IE本身的右键菜单 -->
<table oncontextmenu="return false" id="tab" align="center" width="480"
border="0" cellspacing="1" bgcolor="#003366" cellpadding="5">
<tr bgcolor="#ccc">
<th width="100">学号</th>
<th width="200">姓名</th>
<th width="300">出生年月</th>
<th width="100">高考成绩</th>
</tr>
<tr bgcolor="#fff" onm ousedown="mousedown(this)"
onm ouseover="this.className=‘tr2‘" onm ouseout="this.className=‘tr1‘">
<td>001</td>
<td>007</td>
<td>1997-7-7</td>
<td>77</td>
</tr>
</table>
</center>
</body>
</html>
JS
function setDay(){ /* setDay()得到当前年份和月份的天数*/
// 获取年月日的下拉菜单
var selYear = document.getElementById("year");
var selMonth = document.getElementById("month");
var selDay = document.getElementById("day");
// 获取它们的值
var year=selYear.value;
var month=selMonth.value;
var day=0;
if(month==1 || month==3 ||month==5 ||month==7 ||month==8 ||month==10 ||month==12){
day=31;
}
else if(month==4 ||month==6 ||month==9 ||month==11){
day=30;
}
else{
if(((year%4==0)&&(year%100!=0)) || year%400==0){
day=29;
}
else{
day=28;
}
}
selDay.options.length=0; /*清空下拉列表框中原来的选项*/
selDay.options.length=day;
for(var i=0;i<day;i++){
selDay.options[i]=new Option(i+1,i+1);
}
};
// 记录删除行
var delRow=false;
// 鼠标右键点击时显示删除菜单
function mousedown(tr){
var e = event.button; /*得到鼠标单击的键位 1 左键 2右键 4中键*/
if(e==2){
var menu=document.getElementById("contextMenu");
menu.style.display="block";
var x=event.x;
var y=event.y;
menu.style.top=y;
menu.style.left=x;
delRow=tr;
}
};
function deleteRow(){
var tab=document.getElementById("tab");
// tr.sectionRowIndex得到tr的索引编号
tab.deleteRow(delRow.sectionRowIndex);
var menu=document.getElementById("contextMenu");
menu.style.display="none";
};
function addStu(){
var id=document.getElementById("stuid").value;
var name=document.getElementById("stuname").value;
var score=document.getElementById("score").value;
var bd=document.getElementById("year").value+"-"+document.getElementById("month").value
+"-"+document.getElementById("day").value;
var tab=document.getElementById("tab");
var row=tab.insertRow();
row.onmouseover=function(){
row.style.backgroundColor="#ffcc66";
}
row.onmouseout=function(){
row.style.backgroundColor="#fff";
}
row.onmousedown=function(){
var e = event.button;
if(e==2){
var menu = document.getElementById("contextMenu");
menu.style.display="block";
var x=event.x;
var y=event.y;
menu.style.top=y;
menu.style.left=x;
delRow=row;
}
}
row.style.backgroundColor="#fff";
var td1=row.insertCell();
td1.innerText=id;
var td2=row.insertCell();
td2.innerText=name;
var td3=row.insertCell();
td3.innerText=bd;
var td4=row.insertCell();
td4.innerText=score;
}
操作表格及右键删除