首页 > 其他分享 >web实践

web实践

时间：2023-05-18 15:47:05浏览次数：48  
标签：web return val 实践 innerHTML 监测站 nowRow var

学了点前端，练个手
代码

<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;
}

标签：web,return,val,实践,innerHTML,监测站,nowRow,var
From： https://www.cnblogs.com/wljss/p/17412131.html

相关文章

  • [D盾_web查杀]网站后面查找工具
    本文转载自：[D盾_web查杀]网站后面查找工具更多内容请访问钻芒博客：https://www.zuanmang.net在一定程度上还是有点用的，从网上下载来的源码模板可能并没那么干净。官网：http://www.d99net.net/官网最新版本下载（2019-6-29）『D盾_防火墙』版本:v2.1.4.9：http://www.d99net.net/down......
  • c# web中实现文件上传下载的三种解决方案(推荐)
    ​IE的自带下载功能中没有断点续传功能，要实现断点续传功能，需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag        客户端每次提交下载请求时，服务端都要添加这两个响应头，以保证客户端和服务端将此下载识别为可以断点续传......
  • VS2019新建WebService/Web服务/asmx并通过IIS实现发布和调用
    场景对接第三方系统提供接口文档中显示为asmx接口 访问接口返回数据格式为 xml中的数据格式为json数据。需要在本地新建并模拟调试环境。注：博客：https://blog.csdn.net/badao_liumang_qizhi实现1、WebServiceWebService是一种远程调用技术，也叫XMLWebServiceWe......
  • OpenHarmony Docker移植实践
      Docker简介从操作系统诞生之日起，虚拟化技术就不断的演进与发展，结合目前云原生的发展态势，容器无疑是其中的重要一环。Docker是一个开源的软件项目，可以在Linux操作系统上提供一层额外的抽象，让用户程序部署在一个相对隔离的运行环境，并提供自动管理机制。需要额外指出的是......
  • web自动化测试入门篇04——selenium+python基础方法封装
      ......
  • asp.net web应用程序，如果配置数据设置在 Web. config，每次修改配置项的值，都需要重启应
    问题：asp.netweb应用程序，如果配置数据设置在Web.config，每次修改配置项的值，都需要重启应用才能生效，怎么优化？ 对于ASP.netweb应用程序，如果配置数据设置在Web.config，每次修改配置项的值，都需要重启应用才能生效。有没有更好的方法来配置应用程序所需的数据？解决每次修改配置......
  • umijs或者webpack配置pwa
    UMI.js实现PWAUMI.js是一个可扩展的企业级前端应用框架，它包含了许多优秀的插件，可以快速搭建起一个高质量的前端应用。UMI.js提供了umi-plugin-pwa插件，可以很方便地实现PWA。安装umi-plugin-pwa插件在UMI.js项目中执行以下命令安装umi-plugin-pwa插件： npmins......
  • 【Python】数据分析与可视化实践：收支日统计数据可视化的实现
    Python数据分析与可视化实践：收支日统计数据可视化的实现Author：萌狼蓝天Date：2023-5-7数据读入与基本处理上图是原始数据的一部分，存放于excel中，首先使用pd读入数据。读入数据后，删除不是收入，也不是支出的行。#读取数据datas=pd.read_excel("账单.xlsx",sheet_name=0)#......
  • Spring Cloud开发实践(六): 基于Consul和Spring Cloud 2021.0的演示项目
    目录SpringCloud开发实践(一):简介和根模块SpringCloud开发实践(二):Eureka服务和接口定义SpringCloud开发实践(三):接口实现和下游调用SpringCloud开发实践(四):Docker部署SpringCloud开发实践(五):Consul-服务注册的另一个选择SpringCloud开发实践(六):基......
  • Spring Cloud开发实践(五): Consul - 服务注册的另一个选择
    目录SpringCloud开发实践(一):简介和根模块SpringCloud开发实践(二):Eureka服务和接口定义SpringCloud开发实践(三):接口实现和下游调用SpringCloud开发实践(四):Docker部署SpringCloud开发实践(五):Consul-服务注册的另一个选择关于ConsulHashiCorpConsul......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99