J2EE复习(三)JavaScript(上)-实战应用
日期：2014-05-16 浏览次数：20465 次
J2EE复习(三)JavaScript(下)--实战应用
动态增删改Table表格
一、用js做的表格动态增删查改
工具JavaScript：util.js
//全选反选
function checkAll(boxName) {
var checkBox = document.getElementsByName(boxName);
for (i = 0; i < checkBox.length; i++) {
var checked = checkBox[i].checked;
if (checked) {
checkBox[i].checked = false;
} else {
checkBox[i].checked = true;
}
}
}
//多选验证
function multiCheck(idArray)
{
//var idArray = document.getElementsByName(boxName);
var count = 0;
for(i=0;i<idArray.length;i++)
{
if(idArray[i].checked)
{
count++;
}
}
return count;
}
//回车切换焦点
function toNext(next)
{
if(event.keyCode==13)
{
next.focus();
}
}
//打开右键菜单
function openShortCutMenu(oRow)
{
// 选中当前行
SelectRow(oRow);
aOpenPopMenu("ShortCutMenu");
event.cancelBubble = true;
event.returnValue = false;
}
//关闭右键菜单
function CloseShortCutMenu(){
aClosePopMenu("ShortCutMenu");
}
//显示右键菜单
function aOpenPopMenu(MenuId){
if (document.all(MenuId)){
document.all(MenuId).style.left = event.clientX + document.body.scrollLeft;
document.all(MenuId).style.top = event.clientY + document.body.scrollTop;
document.all(MenuId).style.display = "";
}
}
//隐藏右键菜单
function aClosePopMenu(MenuId){
if (document.all(MenuId)){
document.all(MenuId).style.display = "none";
}
}
学生信息管理主页studentInfo.html
<html>
<head>
<title>学生信息</title>
<script type="text/javascript" src="util.js"></script>
<script>
//显示更新学生信息模态窗体
function showDialog()
{
var result = window.showModalDialog("dialog.html",null,"dialogWidth=400px;dialogHeight=400px;");
if(result&&result.length!=0&&result[0]!="")
{
addRow(result);
}
}
//添加一行学生信息
function addRow(result)
{
var doc = window.listFrame.document;//内嵌框架的document对象
var tb = doc.getElementById("stuTable");//学生信息表格
var tbody = doc.getElementById("mytbody");
//创建新的行
var tr = doc.createElement("<tr onClick='SelectRow(this)' ondblclick='update();' oncontextmenu='openShortCutMenu(this)' title='右键修改'>");
//创建行的第一个单元格中的多选框
var check = document.createElement("<input name='idArray' type='checkbox'>");
var td = document.createElement("td");
td.appendChild(check);
tr.appendChild(td);
//将模式窗体传过来的值添加到新行中
for(i=0;i<result.length;i++)
{
var td = document.createElement("td");
td.appendChild(document.createTextNode(result[i]));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
//删除学生信息
function delStudent()
{
var checks = window.listFrame.document.getElementsByName("idArray");
var count = multiCheck(checks);
if(count==0) {alert("未选中任何选项！"); return;}
if(window.confirm("确定要删除这"+count+"条信息吗？"))
{
while(count>0)
{
var tb = window.listFrame.document.getElementById("stuTable");
var checks = window.listFrame.document.getElementsByName("idArray");
for(i=0;i<checks.length;i++)
{
if(checks[i].checked)
{
tb.deleteRow(checks[i].parentElement.parentElement.rowIndex);
count--;
break;
}
}
}
}
}
//修改学生信息
function update()
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
