web实践
学了点前端，练个手
代码
<html>
<head>
<title>Web程序设计作业1</title>
<meta charset="utf-8">
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="my_css.css">
</link>
<script type="text/javascript">
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
var table=document.getElementById("equipmentTable");
table.deleteRow(i);
}
function insertRow()
{
var table=document.getElementById("equipmentTable");
var newRow=table.insertRow();
var cell1=newRow.insertCell();cell1.innerHTML=$("#siteName1").val();
var cell2=newRow.insertCell();cell2.innerHTML=$("#equipmentName1").val();
var cell3=newRow.insertCell();cell3.innerHTML=$("#equipmentCode1").val();
var cell4=newRow.insertCell();cell4.innerHTML=$("#equipmentCategory1").val();
var cell5=newRow.insertCell();cell5.innerHTML=$("#equipmentType1").val();
var cell6=newRow.insertCell();cell6.innerHTML=$("#installationTime1").val();
var cell7=newRow.insertCell();cell7.innerHTML=$("#equipmentStatus1").val();
var cell8=newRow.insertCell();cell8.innerHTML="<a href='#' onclick='changeDispaly(this);'>修改</a> <a href='#' onclick='deleteRow(this);'>删除</a>";
}
function isRightTime(installationTime)
{
var i;
if(installationTime.length<19)
{
alert("输入的时间字符串过短!");
return 0;
}
for(i=0;i<=3;++i)
if(installationTime[i]<'0'||installationTime[i]>'9')return 0;
if(installationTime[4]!='-')return 0;
for(i=5;i<=6;++i)
if(installationTime[i]<'0'||installationTime[i]>'9')return 0;
if(installationTime[7]!='-')return 0;
for(i=8;i<=9;++i)
if(installationTime[i]<'0'||installationTime[i]>'9')return 0;
if(installationTime[10]!=' ')return 0;
for(i=11;i<=12;++i)
if(installationTime[i]<'0'||installationTime[i]>'9')return 0;
if(installationTime[13]!=':')return 0;
for(i=14;i<=15;++i)
if(installationTime[i]<'0'||installationTime[i]>'9')return 0;
if(installationTime[16]!=':')return 0;
for(i=17;i<=18;++i)
if(installationTime[i]<'0'||installationTime[i]>'9')return 0;
if(installationTime.length>19)
{
alert("输入的时间字符串过长!");
return 0;
}
var nian=0,yue=0,ri=0,shi=0,fen=0,miao=0;
for(i=0;i<=3;++i)nian=nian*10+(installationTime[i]-'0');
for(i=5;i<=6;++i)yue=yue*10+(installationTime[i]-'0');
for(i=8;i<=9;++i)ri=ri*10+(installationTime[i]-'0');
for(i=11;i<=12;++i)shi=shi*10+(installationTime[i]-'0');
for(i=14;i<=15;++i)fen=fen*10+(installationTime[i]-'0');
for(i=17;i<=18;++i)miao=miao*10+(installationTime[i]-'0');
;
if(yue>12)
{
alert("月份不能超过12!");
return 0;
}
if((yue==1||yue==3||yue==5||yue==7||yue==8||yue==10||yue==12)&&ri>31)
{
alert("该月份日期不能超过31!");
return 0;
}
if((yue==4||yue==6||yue==9||yue==11)&&ri>30)
{
alert("该月份日期不能超过30!");
return 0;
}
if(yue==2)
{
if((nian%100!=0&&nian%4==0)||(nian%100==0&&nian%400==0))//闰年
{
if(ri>29)
{
alert("这一年2月日期不能超过29!");
return 0;
}
}
else
{
if(ri>28)
{
alert("这一年2月日期不能超过28!");
return 0;
}
}
}
if(shi>23)
{
alert("小时不能超过23!");
return 0;
}
if(fen>59)
{
alert("分钟不能超过59!");
return 0;
}
if(miao>59)
{
alert("秒数不能超过59!");
return 0;
}
return 1;
}
function confirmInput1()
{
if ( $("#equipmentName1").val() == null || $("#equipmentName1").val() == "" )
{
alert("设备名称不能为空!");
$("#equipmentName1").focus();
return false;
}
if ( $("#equipmentCode1").val() == null || $("#equipmentCode1").val() == "" )
{
alert("设备编码不能为空!");
$("#equipmentCode1").focus();
return false;
}
if ( $("#installationTime1").val() == null || $("#installationTime1").val() == "" )
{
alert("安装时间不能为空!");
$("#installationTime1").focus();
return false;
}
if ( isRightTime( $("#installationTime1").val() )==0)
{
alert("安装时间格式必须是yyyy-MM-dd HH:mm:ss");
$("#installationTime1").focus();
return false;
}
insertRow();
$("#siteName1").val("");
$("#equipmentName1").val("");
$("#equipmentCode1").val("");
$("#equipmentCategory1").val("");
$("#equipmentType1").val("");
$("#installationTime1").val("");
$("#equipmentStatus1").val("");
return true;
}
function changeDispaly(r)
{
nowChangingRow = r.parentNode.parentNode.rowIndex;
var table=document.getElementById("equipmentTable");
var nowRow=table.rows[nowChangingRow].cells;
//$("#changeTable").toggle();
$("#changeTable").show();
$("#siteName2").val(nowRow[0].innerHTML);
$("#equipmentName2").val(nowRow[1].innerHTML);
$("#equipmentCode2").val(nowRow[2].innerHTML);
$("#equipmentCategory2").val(nowRow[3].innerHTML);
$("#equipmentType2").val(nowRow[4].innerHTML);
$("#installationTime2").val(nowRow[5].innerHTML);
$("#equipmentStatus2").val(nowRow[6].innerHTML);
}
var nowChangingRow;
function changeRow()
{
var table=document.getElementById("equipmentTable");
var nowRow=table.rows[nowChangingRow].cells;
nowRow[0].innerHTML=$("#siteName2").val();
nowRow[1].innerHTML=$("#equipmentName2").val();
nowRow[2].innerHTML=$("#equipmentCode2").val();
nowRow[3].innerHTML=$("#equipmentCategory2").val();
nowRow[4].innerHTML=$("#equipmentType2").val();
nowRow[5].innerHTML=$("#installationTime2").val();
nowRow[6].innerHTML=$("#equipmentStatus2").val();
nowRow[7].innerHTML="<a href='#' onclick='changeDispaly(this);'>修改</a> <a href='#' onclick='deleteRow(this);'>删除</a>";
}
function confirmInput2()
{
if ( $("#equipmentName2").val() == null || $("#equipmentName2").val() == "" )
{
alert("设备名称不能为空!");
$("#equipmentName2").focus();
return false;
}
if ( $("#equipmentCode2").val() == null || $("#equipmentCode2").val() == "" )
{
alert("设备编码不能为空!");
$("#equipmentCode2").focus();
return false;
}
if ( $("#installationTime2").val() == null || $("#installationTime2").val() == "" )
{
alert("安装时间不能为空!");
$("#installationTime2").focus();
return false;
}
if ( isRightTime( $("#installationTime2").val() )==0)
{
alert("安装时间格式必须是yyyy-MM-dd HH:mm:ss");
$("#installationTime2").focus();
return false;
}
changeRow();
$("#changeTable").hide();
return true;
}
$(function() //初始化
{
$("#changeTable").toggle();
});
</script>
</head>
<body>
<table id="equipmentTable" border="1">
<caption>设备信息</caption>
<thead>
<tr>
<th>站点名称</th><th>设备名称</th><th>设备编码</th><th>设备分类</th><th>设备类型</th><th>安装时间</th><th>设备状态</th><th>操作</th>
</tr>
<tr>
<td>昌都生态监测站</td> <td>冻土设备01</td><td>XZ001</td><td>土壤</td><td>冻土检测</td><td>2021-05-18 16:53:42</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
<tr>
<td>昌都生态监测站</td> <td>冻土设备04</td><td>XZ004</td><td>土壤</td><td>冻土检测</td><td>2021-05-17 16:54:08</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
<tr>
<td>申扎生态监测站</td> <td>设备1</td><td>1</td><td>1</td><td>1</td><td>2021-04-01 10:09:11</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
<tr>
<td>日喀则生态监测站</td><td>设备4</td><td>4</td><td>4</td><td>4</td><td>2021-03-30 10:16:04</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
<tr>
<td>定日生态监测站</td> <td>设备3</td><td>3</td><td>3</td><td>3</td><td>2021-03-29 10:11:23</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
<tr>
<td>山南生态监测站</td> <td>设备10</td><td>10</td><td>10</td><td>10</td><td>2021-03-24 10:34:19</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
<tr>
<td>那曲生态监测站</td> <td>设备9</td><td>9</td><td>9</td><td>9</td><td>2021-03-23 10:33:35</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
<tr>
<td>改则生态监测站</td> <td>设备2</td><td>2</td><td>2</td><td>2</td><td>2021-03-17 10:10:27</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
<tr>
<td>康芒生态监测站</td> <td>设备7</td><td>7</td><td>7</td><td>7</td><td>2021-03-16 10:32:19</td><td>正常</td><td><a href="#" onclick="changeDispaly(this);">修改</a> <a href="#" onclick="deleteRow(this);">删除</a> </td>
</tr>
</thead>
</table>
<form method="POST" id="addTable">
<fieldset>
<legend>新增</legend>
站点名称(*)：
<select id="siteName1">
<option value="昌都生态监测站">昌都生态监测站</option>
<option value="申扎生态监测站">申扎生态监测站</option>
<option value="日喀则生态监测站">日喀则生态监测站</option>
<option value="定日生态监测站">定日生态监测站</option>
<option value="山南生态监测站">山南生态监测站</option>
<option value="那曲生态监测站">那曲生态监测站</option>
<option value="改则生态监测站">改则生态监测站</option>
<option value="康芒生态监测站">康芒生态监测站</option>
</select>
<br />
设备名称(*)：<input type="text" value="" id="equipmentName1"><br />
设备编码(*)：<input type="text" value="" id="equipmentCode1"><br />
设备分类(*)：
<select id="equipmentCategory1">
<option value="土壤">土壤</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br />
设备类型(*)：
<select id="equipmentType1">
<option value="冻土检测">冻土检测</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br />
安装时间(*)：<input type="text" value="" id="installationTime1"><br /><br />
设备状态(*)
<select id="equipmentStatus1">
<option value="正常">正常</option>
<option value="异常">异常</option>
</select>
<br />
<input type="button" id="button1" value="确定" onclick="confirmInput1();" />
</fieldset>
</form>
<form method="POST" id="changeTable">
<fieldset>
<legend>修改</legend>
站点名称(*)：
<select id="siteName2">
<option value="昌都生态监测站">昌都生态监测站</option>
<option value="申扎生态监测站">申扎生态监测站</option>
<option value="日喀则生态监测站">日喀则生态监测站</option>
<option value="定日生态监测站">定日生态监测站</option>
<option value="山南生态监测站">山南生态监测站</option>
<option value="那曲生态监测站">那曲生态监测站</option>
<option value="改则生态监测站">改则生态监测站</option>
<option value="康芒生态监测站">康芒生态监测站</option>
</select>
<br />
设备名称(*)：<input type="text" value="" id="equipmentName2"><br />
设备编码(*)：<input type="text" value="" id="equipmentCode2"><br />
设备分类(*)：
<select id="equipmentCategory2">
<option value="土壤">土壤</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br />
设备类型(*)：
<select id="equipmentType2">
<option value="冻土检测">冻土检测</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br />
安装时间(*)：<input type="text" value="" id="installationTime2"><br /><br />
设备状态(*)
<select id="equipmentStatus2">
<option value="正常">正常</option>
<option value="异常">异常</option>
</select>
<br />
<input type="button" id="button2" value="确定" onclick="confirmInput2();" />
</fieldset>
</form>
</body>
</html>
css
table
{
width:1400px;
color:rgb(23, 21, 21);
}
form
{
width:400px;
color:maroon;
}
button
{
background-color: rgb(109, 109, 225);
color: white;
}
caption
{
font-size: 35px;
}
th
{
font-family: 宋体;
font-size: 20px;
color: red;
border: 1px solid red;
}
a
{
color: blue;
}
#button1
{
background-color: rgb(109, 109, 225);
color: white;
}
#button2
{
background-color: rgb(109, 109, 225);
color: white;
}
