js做的小作业增删查改以及根据表头排序等一系列的操作

kidiaoer

浏览: 821860 次
性别:
来自: 深圳

最近访客更多访客>>

nandyweb

lehmann_ding

dniahf

wxn_yxm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs

J#XHTML

<!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-Type" content="text/html; charset=gb2312" />
<title>综合使用的例子</title>
<style type="text/css">

</style>

<style type="text/css">
.tab {
border-collapse: collapse;
width: 650px;
border: 1px solid #4d9ab0
}

.tab td {
border: 1px solid #4d9ab0
}
</style>
<script language="javascript"></script>

<script>
var j = 0;
function display(but) {
var div = document.getElementById("adiv");
if (div.style.display == 'none') {
div.style.display = 'block';
but.value="隐藏";
} else {
div.style.display = 'none';
but.value="添加";
}
}
function initImg() {
var img = document.getElementById("imgs");
img.src = document.getElementById("file").value;
}
function showDate() {
var date = new Date();
var da = date.toLocaleString();
var d = document.getElementById("date").value = da;
}
function autoChangeTime() {
window.setInterval(showDate, 1000);
}
var yearObj = null;
var monthObj = null;
var dateObj = null;
function showYear() {
yearObj = document.getElementById("year");
monthObj = document.getElementById("month");
dateObj = document.getElementById("dates");
var date = new Date();
var curYear = date.getYear();
var curMonth = date.getMonth()+1;
var curDate = date.getDate();
if (yearObj == null || monthObj == null || dateObj == null) {
alert("Can't   find   object!");
return false;
}
yearObj.attachEvent("onchange", changeYear);
monthObj.attachEvent("onchange", changeMonth);
initDates(yearObj, 1968, 2020);
initDates(monthObj, 1, 12);
initDates(dateObj, 1, dependDays(curYear, curMonth));
yearObj.value = curYear;
monthObj.value = curMonth;
dateObj.value = curDate;
}
function dependDays(year, mon) {
var date = new Date(year, mon, 0);
return date.getDate();
}
function initDates(obj, min, max) {
for ( var i = min; i <= max; i++)
optionAdd(obj, i);
}
function optionAdd(obj, value) {
var newOption = document.createElement("option");
obj.add(newOption);
newOption.value = value;
newOption.text = value;
}
function changeYear() {
var dateValue = dateObj.value;
dateObj.innerHTML = "";
initDates(dateObj, 1, dependDays(parseInt(yearObj.value),
parseInt(monthObj.value)));
dateObj.value = dateValue;
if (dateObj.selectedIndex == -1){
dateObj.selectedIndex = 0;
}
}
function changeMonth() {
dateObj.innerHTML = "";
initDates(dateObj, 1, dependDays(parseInt(yearObj.value),
parseInt(monthObj.value)));
}
function changeSelect(source, target, cmd) {
var hobby1 = document.getElementById(source);
var hobby2 = document.getElementById(target);
var s1 = hobby1.options, s2 = hobby2.options;
for ( var i = s1.length - 1; i >= 0; i--) {
if (cmd && !hobby2.contains(s1[i])) {
hobby2.appendChild(s1[i]);
} else if (!cmd && s1[i].selected) {
hobby2.appendChild(s1[i]);
}
}
}
function xiaoyan() {
changeText();
}
function changeText() {
var a = document.getElementById("xiaoyan");
var sum = '';
for ( var i = 0; i < 5; i++) {
var num = parseInt(Math.random() * 10);
sum += num;
}
a.value = sum;
}
function goes() {
changeText();
}
function getFromValue() {
var table1 = document.getElementById("tbodys");
var name;
if (myform.file.value == '') {
alert("请选择要上传的形象照");
return false;
}
if (myform.name.value!='') {
name=myform.name.value;
}else {
alert("请输入用户名");
return false;
}
var arr = [];
var sex, hobby = '', tar = '';
var isSelect = true;
for ( var i = 0; i < myform.sex.length; i++) {
if (myform.sex[i].checked) {
sex = myform.sex[i].value;
isSelect = false;
}
}
if (isSelect) {
alert("请选择性别");
return false;
}
/*isSelect = true;
for ( var i = 0; i < myform.year.length; i++) {
if (myform.year[i].selected) {
year = myform.year[i].value;
isSelect = false;
}
}
if (isSelect) {
alert("请选择出生的年份");
return false;
}
isSelect = true;
for ( var i = 0; i < myform.month.length; i++) {
if (myform.month[i].selected) {
month = myform.month[i].value;
isSelect = false;
}
}
if (isSelect) {
alert("请选择出生的月份");
return false;
}
isSelect = true;
for ( var i = 0; i < myform.dates.length; i++) {
if (myform.dates[i].selected) {
date = myform.dates[i].value;
isSelect = false;
}
}
if (isSelect) {
alert("请选择出生的日期");
return false;
}*/
isSelect = true;
for ( var i = 0; i < myform.hobby.length; i++) {
if (myform.hobby[i].checked) {
hobby += myform.hobby[i].value + ',';
isSelect = false;
}
}
if (isSelect) {
alert("请选择爱好");
return false;
}
isSelect = true;
for ( var i = 0; i < myform.tar.length; i++) {
if (myform.tar.length > 0) {
tar += myform.tar.options[i].value + ',';
isSelect = false;
}
}
if (isSelect) {
alert("请选择特长");
return false;
}

if (myform.validate.value == "") {
alert("请输入验证码");
return false;
} else if (myform.xiaoyan.value != myform.validate.value) {
alert("验证码不正确");
changeText();
return false;
}
var year = myform.year.value;
var month = myform.month.value;
var date = myform.dates.value;
var age = getAge(year+'.'+month+'.'+date);
var birth = year + '年' + month + '月' + date + '日';
arr.push('<input type="checkbox" name="rowId">');
arr.push(name);
arr.push(sex);
arr.push(age);
arr.push(birth);
arr.push(hobby);
arr.push(tar);
arr.push(myform.date.value);
addRow(table1, arr);
changeText();
}
function getAge(strBirthday) {
var returnAge;
var strBirthdayArr = strBirthday.split(".");
var birthYear = strBirthdayArr[0];
var birthMonth = strBirthdayArr[1];
var birthDay = strBirthdayArr[2];
d = new Date();
var nowYear = d.getYear();
var nowMonth = d.getMonth() + 1;
var nowDay = d.getDate();
if (nowYear == birthYear) {
returnAge = 0;
} else {
var ageDiff = nowYear - birthYear;
if (ageDiff > 0) {
if (nowMonth == birthMonth) {
var dayDiff = nowDay - birthDay;
if (dayDiff < 0) {
returnAge = ageDiff - 1;
} else {
returnAge = ageDiff;
}
} else {
var monthDiff = nowMonth - birthMonth;
if (monthDiff < 0) {
returnAge = ageDiff - 1;
} else {
returnAge = ageDiff;
}
}
} else {
returnAge = -1;
}
}
return returnAge;
}
function addRow(tab, arr) {
if (tab == null) {
return;
}
var cell, row_index = -1;
row_index = tab.rows.length;
var newrow = tab.insertRow(row_index);
for ( var i = 0; i < arr.length; i++) {
cell = newrow.insertCell(i);
cell.innerHTML = arr[i];
}
}
function deleteRow() {
var tbody = document.getElementById("tbodys");
var rowArr = document.getElementsByName("rowId");
for ( var i = rowArr.length-1; i >= 0; i--) {
if (rowArr[i].checked) {
var test = rowArr[i].parentElement.parentElement.rowIndex-2;
tbody.deleteRow(test);
}
}
}
function selectAll(){
var selectAll = document.getElementsByName("selectAll");
var rowArr = document.getElementsByName("rowId");
if (selectAll[0].checked) {
for ( var i = 0; i < rowArr.length; i++) {
rowArr[i].checked=true;
}
}else {
for ( var i = 0; i < rowArr.length; i++) {
rowArr[i].checked=false;
}
}
}
var count = 0;
function sortCells(t) {
var tb = document.getElementById("tbodys");
var array = [];
for ( var i = 0,j = tb.rows.length; i < j; i++) {
array.push(tb.rows[i]);
}
var index = t.cellIndex;
if (tb.sortCol == index) {
array.reverse();
} else {
array.sort(compare(index,count));
}
var df = document.createDocumentFragment();
for ( var j = 0,k = array.length; j < k; j ++) {
df.appendChild(array[j]);
}
tb.appendChild(df);
tb.sortCol = index;
//count ++;
}
function compare(index,count){
return function(t1,t2){
//if (count%2==0) {
return t1.cells[index].innerText.localeCompare(t2.cells[index].innerText);
//}else{
// return t2.cells[index].innerText.localeCompare(t1.cells[index].innerText);
//}
}
}
function bindEvent() {
var e = myform.elements;
for(var i=0,j=e.length;i<j;i++){
if (e[i].value==name) {
checks(e[i]);
}else{
    e[i].onkeypress=nextFocus;
}
}
}
function nextFocus(){
var e = myform.elements;
var k = window.event;
for(var i=0,j=e.length;i<j;i++){
if(e[i]==this && k.keyCode==13){
e[i+1].focus();
break;
}
}
}
function checks(obj){
var e = window.event;
if (myform.name.value=='') {
if(e.keyCode >= 48 && e.keyCode <= 57){
e.returnValue=false;
    }else {
e.returnValue=true;
}
}
}
</script>
</head>

<body onload="autoChangeTime(),showYear(),xiaoyan(),bindEvent()"
id="test">
<form action="" name="myform" onsubmit="return false">
<div id="adiv" style="display: none">
<table width="476" border="1" align="center" cellpadding="1"
cellspacing="1">
<tr>
<td>用户形象照:</td>
<td colspan="3"><input id="file" type="file" size="24"
maxlength="24" value="123" /></td>
<td width="123" rowspan="5"><img id="imgs"
src="E:\diaoer\test.jpg" title="用户形象照" /> <input name="text"
type="button" size="24" maxlength="24" onclick="initImg()" value="上传" />
</td>
</tr>
<tr>
<td width="137">用户名:</td>
<td colspan="3"><input type="text" id="name"
onkeypress="checks(this)" /></td>
</tr>
<tr>
<td>性别</td>
<td colspan="3"><input type="radio" name="sex" value="男" /> 男 <input
type="radio" name="sex" value="女" /> 女</td>
</tr>
<tr>
<td>出生年月</td>
<td colspan="3"><select id="year">
</select>年 <select id="month">
</select>月 <select id="dates">
</select>日</td>
</tr>
<tr>
<td>爱好</td>
<td colspan="3"><input type="checkbox" name="hobby" value="篮球" />
篮球 <input type="checkbox" name="hobby" value="球" /> 球<br />
<input type="checkbox" name="hobby" value="看书 " /> 看书 <input
type="checkbox" name="hobby" value="玩电脑 " /> 玩电脑 <input
type="checkbox" name="hobby" value="跑步" /> 跑步</td>
</tr>

<tr>
<td height="125" rowspan="4">特长</td>
<td width="104" rowspan="4"><select multiple="multiple" id="sou"
size="6">
<option value="跑步">跑步</option>
<option value="电脑">电脑</option>
<option value="蓝球">蓝球</option>
<option value="足球">足球</option>
<option value="上网">上网</option>
<option value="游泳">游泳</option>
</select></td>
<td width="88"><input name="button" type="button" id="button"
value="->" onclick="changeSelect('sou','tar',0)" /></td>
<td colspan="2" rowspan="4"><select multiple="multiple" id="tar"
size="6">
</select></td>
</tr>
<tr>
<td><input name="button2" type="button" id="button2"
value="<-" onclick="changeSelect('tar','sou',0)" /></td>
</tr>
<tr>
<td><input name="button3" type="button" id="button3"
value="-->" onclick="changeSelect('sou','tar',1)" /></td>
</tr>
<tr>
<td><input name="button4" type="button" id="button4"
value="<--" onclick="changeSelect('tar','sou',1)" /></td>
</tr>
<tr>
<td>注册时间:</td>
<td colspan="4"><input type="text" id="date" size="60"
readonly="readonly" /></td>
</tr>
<tr>
<td>验证码：</td>
<td colspan="4"><input name="validate" type="text" size="5"
maxlength="5" /> <span class="STYLE1"><input type="text"
id="xiaoyan" size="5" class="STYLE1" readonly="readonly" /></span><input
name="go" type="button" value="看不清，换一张" onclick="goes()" /></td>
</tr>
<tr>
<td colspan="5">
<div align="center"><input name="button32" type="submit"
id="button32" value="提交" onclick="getFromValue()" /> <input
name="button33" type="reset" id="button33" value="重置" /></div>
</td>
</tr>
</table>
</div>
</form>

<table id="tab" class="tab" width="854" border="1" align="center"
cellpadding="1" cellspacing="1">
<thead id="thead">
<tr>
<td colspan="8"><span>用户名: <input type="text"
name="textfield3" /> <input name="button5" type="button"
id="button5" value="查询" /></span> <span> <input name="button5"
type="button" id="button5" value="添加" onclick="display(this);" /> <input
name="button6" type="button" id="button6" value="修改" /> <input
name="button7" type="button" id="button7" value="删除"
onclick="deleteRow()" /> </span></td>
</tr>
<tr>
<td width="33"><input type="checkbox" name="selectAll"
onclick="selectAll()" /></td>
<td width="170" style="cursor: pointer" onclick="sortCells(this)">用户名</td>
<td width="34" style="cursor: pointer" onclick="sortCells(this)">性别</td>
<td width="36" style="cursor: pointer" onclick="sortCells(this)">年龄</td>
<td width="89" style="cursor: pointer" onclick="sortCells(this)">出生日期</td>
<td width="136" style="cursor: pointer" onclick="sortCells(this)">爱好</td>
<td width="116" style="cursor: pointer" onclick="sortCells(this)">特长</td>
<td width="197" style="cursor: pointer" onclick="sortCells(this)">注册时间</td>
</tr>
</thead>
<tbody id="tbodys" />

</table>
<p> </p>
<script language="javascript"></script>
</body>
</html>

分享到：

英语单词 java相关 | struts

2010-08-01 20:51
浏览 1363
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论