操作表格及右键删除

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息管理</title>
<script src="../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">&nbsp;
姓名: <input type="text" id="stuname" name="stuname" size="8">&nbsp;
出生日期: <select id="year" onchange="setDay()">
<script>
for(var i=1970;i<2010;i++){
document.write("<option value="+i+">"+i+"</option>");
};
</script>
</select>年
<select id="month" onchange="setDay()">
<script>
for(var i=1;i<13;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>月
<select id="day">
<script>
for(var i=1;i<32;i++){
document.write("<option value="+i+">"+i+"</option>")
}
</script>
</select>日
<br> <!-- 换行 -->
高考成绩: <input type="text" id="score" name="score" size="3">&nbsp;
<input type="button" value="添加" 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" onmousedown="mousedown(this)"
onmouseover="this.className=‘tr2‘" onmouseout="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;
}

时间: 2024-11-01 06:11:34

操作表格及右键删除的相关文章

js操作表格-添加与删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

NSTableView 表格操作:增加,删除,编辑(方法2)

NSTableView 表格操作:增加,删除,编辑(方法2) 在: NSWindowController 新建表单 (H,M,XIB三个文件+新建一个类放CellData) 1.不使用delegate 2.数据源直接是当前文件File's Owner 3.H继承NSTableView协议,将需要的几个函数放入 4.增加一个列表数据单元类 这个方法的特点是: 当新建立一个窗体,显示一个表格内容,不使用Deleget就少了一个类的2个文件,让程序简单化 操作步骤: STEP1 将NSTableVie

js回车动态添加表格,右键动态删除表格行

<script type="text/javascript" language="javascript">//屏蔽浏览器右键function stop(){ return false;}document.oncontextmenu = stop;var i=3;$(function() { //点击页面其他位置右键菜单消失 $('body').bind('click', function(ev) { $('#menu').css('display','n

0417 js节点操作表格(添加、删除)

节点创建和追加 节点创建 元素节点:document.createElement(tag标签名称); 文本节点:document.createTextNode(文本内容); 属性设置:node.setAttribute(名称,值); 节点追加: 父节点.appendChild(子节点); 父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边 父节点.replaceChild(newnode,oldnode); //newnode替换到o

DOM操作表格

前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码.本文将详细介绍DOM操作表格的属性和方法 需求 要通过DOM实现下列格式的表格结构 <table border = "1" width = "100%">     <tbody>         <tr>           

ExtJS4.2学习(12)基于表格的右键菜单(转)

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/181.html ----------------------------------------------------------------------------------------------- 在实际的软件开发中,我们的grid表格为了方便用户通常会有一个右键菜单来实现对表格的增.删.改等操作,下面看一下演示的效果: 以下是完整可

示例-创建表格-指定行列&amp;删除表格的行和列

<body> <script type="text/javascript"> /* *上面的方法和你麻烦.*既然操作的是表格,*那么最方便的方式就是使用表格节点对象的方法.* *表格是由行组成.表格节点对象中insertRow方法就完成了创建行并添加的动作.* *行是有单元格组成.通过tr节点对象的insertCell来完成.*/function crtTable(){ var oTabNode = document.createElement("ta

19.DOM操作表格及样式

DOM操作表格及样式 学习要点:1.操作表格2.操作样式 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作table<table border = "1

轻松学习JavaScript二十三:DOM编程学习之操作表格

一使用HTML标签创建表格: 代码: <span style="font-size:18px;"><table border="1px"width="300px"> <caption>人员表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th>