js控制增加行修改版

来源：互联网发布：阿里编程测试编辑：程序博客网时间：2024/05/19 03:44

页面代码

<%@ page contentType="text/html; charset=GBK" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>教育信息增加</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/myjs.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/PopCalendar.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/MiniCalendar.js"></script>    
  </head>
  
  <body>
    <form id="form1" action="" method="post">
      <div id="div1" style="width:760px;border:1px;border-color:#000000;border-style:solid">
        <table width="760px">
            <caption>教育经历</caption>
            <tr>
                <td align="right">教育类型</td>
                <td align="left">
                    <select id="education" style="width:140px;">
                        <option value="1">小学</option>
                        <option value="2">初中</option>
                        <option value="3">高中</option>
                        <option value="4">大学</option>
                    </select>
                </td>
                <td align="right">年数</td>
                <td align="left"><input type="text" id="years" style="width:140px;"></td>
            </tr>
            <tr>
                <td align="right">起始日期</td>
                <td align="left"><input type="text" id="sdate" readonly="true" style="background-color:#A9BEC7;width:140px;" >
                <img style="cursor:hand;" src="<%=request.getContextPath() %>/images/image013.gif" onclick="fPopCalendar(sdate,sdate);" /></td>
                <td align="right">结束日期</td>
                <td align="left"><input type="text" id="edate" readonly="true" style="background-color:#A9BEC7;width:140px;">
                <img style="cursor:hand;" src="<%=request.getContextPath() %>/images/image013.gif" onclick="fPopCalendar(edate,edate);" /></td>
            </tr>
            <tr>
                <td align="right">其他</td>
                <td align="left" colsapn="2" >
                <textarea rows="3" style="width:280px;" id="other"></textarea></td>
                <td align="right"> </td>
            </tr>
            <tr>
                <td align="right" colspan="3"> </td>
                <td align="left">
                    <input type="button" id="addbtn" value="增加" onclick="addRow()">
                    <input type="button" id="savebtn" value="保存">
                    <input type="reset" id="resetbtn" value="重置"> 
                </td>
            </tr>
        </table>
      </div>
    </form>
    <form id="form2" action="" method="post">
      <table width="760px" cellspacing="0" cellpadding="1" bordercolorlight="#ffffff" bordercolordark="#000000" border="1">
        <caption align="left">教育信息列表</caption>
        <tbody >
            <tr>
                <td width="15%" align="center">教育类型</td>
                <td width="15%" align="center">年数</td>
                <td width="20%" align="center">起始日期</td>
                <td width="20%" align="center">结束日期</td>
                <td width="25%" align="center">其他</td>
                <td width="5%" align="center">操作</td>
            </tr>
        </tbody>
        <tbody id="templetTbody">       
        </tbody>
      </table>
    </form>
  </body>
</html>

相关js代码

function addRow(){
    if(!checkValue()){
        return false;
    }
    var tbody=document.getElementById("templetTbody");
    var newRow=tbody.insertRow();
    var education=document.createElement("<input type='hidden' id='education_s'>");
    var years=document.createElement("<input type='hidden' id='year_s'>");
    var sdate=document.createElement("<input type='hidden' id='sdate_s'>");
    var edate=document.createElement("<input type='hidden' id='edate_s'>");
    var other=document.createElement("<input type='hidden' id='other_s'>");
    var operate=document.createElement("<input type='button' value='删除' onclick='delRow(this)'>");
    var td1=document.createElement("td");
    td1.align="center";
    var td2=document.createElement("td");
    td2.align="center";
    var td3=document.createElement("td");
    td3.align="center";
    var td4=document.createElement("td");
    td4.align="center";
    var td5=document.createElement("td");
    td5.align="center";
    var td6=document.createElement("td");
    td6.align="center";
    newRow.appendChild(td1);
    newRow.appendChild(td2);
    newRow.appendChild(td3);
    newRow.appendChild(td4);
    newRow.appendChild(td5);
    newRow.appendChild(td6);
    newRow.appendChild(education);
    newRow.appendChild(years);
    newRow.appendChild(sdate);
    newRow.appendChild(edate);
    newRow.appendChild(other);
    td1.innerText=document.getElementById("education").options[document.getElementById("education").selectedIndex].innerText;
    td2.innerText=document.getElementById("years").value;
    td3.innerText=document.getElementById("sdate").value;
    td4.innerText=document.getElementById("edate").value;
    if(document.getElementById("other").value.length==0){
        td5.innerHTML=" ";
    }
    else{
        td5.innerText=document.getElementById("other").value;
    }
    td6.insertBefore(operate);
    education.value=document.getElementById("education").value;
    years.value=document.getElementById("years").value;
    sdate.value=document.getElementById("sdate").value;
    edate.value=document.getElementById("edate").value;
    other.value=document.getElementById("other").value;
}
function delRow(obj){
    var tbody=document.getElementById("templetTbody");
    var tr=obj.parentNode.parentNode;
    tbody.removeChild(tr);
}
function checkValue(){
    var education=document.getElementById("education").value;
    education=education.replace(/(^/s*)|(/s*$)/g, "");
    var years=document.getElementById("years").value;
    years=years.replace(/(^/s*)|(/s*$)/g, "");
    var sdate=document.getElementById("sdate").value;
    sdate=sdate.replace(/(^/s*)|(/s*$)/g, "");
    var edate=document.getElementById("edate").value;
    edate=edate.replace(/(^/s*)|(/s*$)/g, "");
    var other=document.getElementById("other").value;
    other=other.replace(/(^/s*)|(/s*$)/g, "");
    if(education.length==0){
        window.alert("【教育类型】不能为空！");
        document.getElementById("education").focus();
        return false;
    }
    if(years.length==0){
        window.alert("【年数】不能为空！");
        document.getElementById("years").focus();
        return false;
    }
    if(isNaN(years)){
        window.alert("【年数】类型输入错误！");
        document.getElementById("years").focus();
        return false;
    }
    if(sdate.length==0){
        window.alert("【起始日期】不能为空！");
        document.getElementyId("sdate").focus();
        return false;
    }
    if(edate.length==0){
        window.alert("【结束日期】不能为空！");
        document.getElementById("edate").focus();
        return false;
    }
    return true;
}