一个小例子
程序员文章站
2022-03-28 11:17:51
...
<%@ page contentType = "text/html;charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String imagePath = basePath + "public_html/Images/";
%>
<html>
<head>
<title>课程维护</title>
<meta http-equiv = Content-Type content = "text/html; charset=utf-8">
<link rel = stylesheet href ="<%=basePath%>public_html/css/tdcss.css" type = text/css>
<link rel = stylesheet href ="<%=basePath%>public_html/css/css.css" type = text/css>
<script language ="javascript" >
//当前页号
var allPageNo = 1;
//全部学员table的行数
var allRowLength = 0;
//学员个数
var testUserCount = 0;
//总页数
var pageNum = 0;
//每页记录数量
var pageSize = 0;
//最后一页记录数量
var endPageSize = 0;
//展示全部学员信息的table
var allTUTable;
//全部学员的checkbox
var allTestUserCB;
var tempTable;
function init() {
//展示全部学员信息的table
allTUTable = window.document.all.allTestUserTable;
//全部学员的checkbox
allTestUserCB = window.document.all.allTestUser;
//临时存储 被选择的学员信息的table
tempTable = window.document.all.tempTUTable;
//翻页用
allRowLength = allTUTable.rows.length;
testUserCount = allRowLength - 1;
pageSize = 5;
pageNum = Math.round(testUserCount/pageSize);
endPageSize = testUserCount - ((pageNum - 1) * pageSize);
}
//页面初始化时 调用
function load() {
init();
if(pageNum == 1){
window.document.all.next.disabled = true;
window.document.all.next.href = "#";
}
window.document.all.pre.disabled = true;
window.document.all.pre.href = "#";
//显示 10条记录， 事实上全部学员都查出来了
for(var i = 1; i <= pageSize; i++) {
allTUTable.rows[i].style.display = "";
}
}
//为课程选择学员
function selectTestUser(){
//已选学员的table的行数
rowLength = tempTable.rows.length;
//全部学员table的单元格数
cellsLength = allTUTable.cells.length;
var seleteTestUser = "";
for(var i = 0; i < allTestUserCB.length; i++)
{
if(allTestUserCB[i].checked){
allTestUserCB[i].checked = false;
allTestUserCB[i].disabled = true;
//被选中的行
var currentRow = allTUTable.rows[i+1];
currentRow.disabled = true;
//向已选学员table里添加新记录
addNewRow(currentRow, allTestUserCB[i].value);
}
}
}
//向table里添加新行
function addNewRow(currentRow, checkBoxValue) {
newRow = tempTable.insertRow(rowLength);
for(var j = 0; j < (allTUTable.rows[0].cells.length); j++){
newCell = newRow.insertCell();
if(j == 0){
newCell.innerHTML = "<input type='checkbox' id='newCB' name='newCB' checked='true' value='"
+ checkBoxValue + "'>"
+ currentRow.cells[j].innerText;
} else {
newCell.innerHTML = currentRow.cells[j].innerText;
}
}
}
//allTestUser 下一页
function nextAll() {
window.document.all.pre.disabled = false;
window.document.all.pre.href = "javascript:preAll()";
var endIndex;
var startIndex = getStartIndex(allPageNo);
endIndex = startIndex + pageSize;
//隐藏当前页
hiddenPage(startIndex, endIndex);
allPageNo ++;
startIndex = getStartIndex(allPageNo);
if(allPageNo == pageNum){
//disabled对超链接不管用 设置了还能点 所以给他设置成#
window.document.all.next.disabled = true;
window.document.all.next.href = "#";
endIndex = endPageSize + startIndex;
}else {
endIndex = startIndex + pageSize;
}
//显示下一页
displayPage(startIndex, endIndex);
}
//allTestUser 上一页
function preAll() {
var startIndex = getStartIndex(allPageNo);
var endIndex;
if(allPageNo == pageNum){
endIndex = startIndex + endPageSize;
}else {
endIndex = startIndex + pageSize;
}
//隐藏当前页
hiddenPage(startIndex, endIndex);
allPageNo --;
//设置翻页按钮
if(allPageNo == 1) {
window.document.all.pre.disabled = true;
window.document.all.pre.href = "#";
}
window.document.all.next.disabled = false;
window.document.all.next.href = "javascript:nextAll()";
startIndex = getStartIndex(allPageNo);
endIndex = startIndex + pageSize;
//显示上一页
displayPage(startIndex, endIndex);
}
//隐藏一页
function hiddenPage(startIndex, endIndex) {
for(var i = (startIndex + 1); i <= endIndex; i++) {
allTUTable.rows[i].style.display = "none";
}
}
//显示一页
function displayPage(startIndex, endIndex) {
for(var i = (startIndex + 1); i <= endIndex; i++) {
allTUTable.rows[i].style.display = "";
}
}
//根据当前页号得到 起始idex
function getStartIndex(allPageNo) {
return (allPageNo - 1) * pageSize;
}
//保存
function save() {
var testNewCB = window.document.getElementsByName("newCB");
for(var i = 0; i< testNewCB.length; i++) {
alert(testNewCB[i].value);
}
}
</script>
</head>
<body onload="load()">
<div align="center">
<table width="800" align="center">
<tr align="center">
<td align="left" width="300">
已选的学员
<table id="selectedTUTable" border = 1 width="100%" cellspacing = 0 cellpadding = 1 class = commonText>
<tr class ="tableTitleText">
<td width ="30">编号</td>
<td width ="70">学员id</td>
<td width ="100">公司id</td>
<td width="30"> </td>
</tr>
<s:iterator value="allTestUser" id="testUser" status="st">
<tr id="<s:property value="#st.getIndex()"/>" >
<td>
<input type="checkBox" name="selectedCheckBox" value="<s:property value="#testUser.sid"/>">
<s:property value="#st.getIndex()"/>
</td>
<td><s:property value="#testUser.userID"/></td>
<td><s:property value="#testUser.companyID"/></td>
<td>
<a href="<s:url action="initModifyTestUser.action">
<s:param name="userSID" value="#testUser.sid"></s:param>
</s:url>">编辑</a>
</td>
</tr>
</s:iterator>
</table>
<table id="tempTUTable" border = 1 width="100%" cellspacing = 0 cellpadding = 1 class = commonText>
</table>
</td>
<td width="200" align="center">
<input type="button" value="<--选择" onclick="selectTestUser()">
<br />
<br />
<input type="button" value="保 存" onclick="save()">
</td>
<td align="right" width="300">
待选的学员
<table id="allTestUserTable" border = 1 width="100%" cellspacing = 0 cellpadding = 1 class = commonText>
<tr class ="tableTitleText">
<td width ="30">编号</td>
<td width ="70">学员id</td>
<td width ="100">公司id</td>
<td width="30"> </td>
</tr>
<s:iterator value="allTestUser" id="testUser" status="st">
<tr id="all<s:property value="#st.getIndex()"/>" style="display:none;">
<td>
<input type="checkBox" id="allTestUser" name="testUserSIDs" value="<s:property value="#testUser.sid"/>">
<s:property value="#st.getIndex()"/>
</td>
<td><s:property value="#testUser.userID"/></td>
<td><s:property value="#testUser.companyID"/></td>
<td>
<a href="<s:url action="initModifyTestUser.action">
<s:param name="userSID" value="#testUser.sid"></s:param>
</s:url>">编辑</a>
</td>
</tr>
</s:iterator>
</table>
<table id="ss"width="100%" cellspacing = 0 cellpadding = 1 class = commonText>
<tr class ="tableTitleText">
<td width ="30"> </td>
<td width ="70"><a id="pre" href="javascript:preAll()">上一页</a></td>
<td width ="100"><a id="next" href="javascript:nextAll()">下一页</a></td>
<td width="30"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
页面是 struts2做的
[img]
[/img]
上一篇： JavaScript 学习笔记 五 函数
下一篇： JavaScript学习笔记五