js动态添加表格和删除表格

最新推荐文章于 2024-08-31 16:32:57 发布

原创最新推荐文章于 2024-08-31 16:32:57 发布 · 298 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用JavaScript实现的动态日期选择器，该选择器能够根据当前年份动态填充年、月、日下拉菜单，并根据所选月份和年份的变化更新日期选项，特别考虑了闰年和平年的差异。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

<script language="JavaScript">
    window.onload = function () {
        strYYYY = document.form1.YYYY.outerHTML;
        strMM = document.form1.MM.outerHTML;
        strDD = document.form1.DD.outerHTML;
        MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

//先给年下拉框赋内容
        var y = new Date().getFullYear();
        var str = strYYYY.substring(0, strYYYY.length - 9);
        for (var i = (y - 30); i < (y + 30); i++) //以今年为准，前30年，后30年
        {
            str += "<option value='" + i + "'> " + i + "</option>\r\n";
        }
        document.form1.YYYY.outerHTML = str + "</select>";

//赋月份的下拉框
        var str = strMM.substring(0, strMM.length - 9);
        for (var i = 1; i < 13; i++) {
            str += "<option value='" + i + "'> " + i + "</option>\r\n";
        }
        document.form1.MM.outerHTML = str + "</select>";

        document.form1.YYYY.value = y;
        document.form1.MM.value = new Date().getMonth() + 1;
        var n = MonHead[new Date().getMonth()];
        if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
        writeDay(n); //赋日期下拉框
        document.form1.DD.value = new Date().getDate();
    }
    function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
    {
        var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
        if (MMvalue == "") {
            DD.outerHTML = strDD;
            return;
        }
        var n = MonHead[MMvalue - 1];
        if (MMvalue == 2 && IsPinYear(str)) n++;
        writeDay(n)
    }
    function MMDD(str) //月发生变化时日期联动
    {
        var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
        if (str == "") {
            DD.outerHTML = strDD;
            return;
        }
        var n = MonHead[str - 1];
        if (str == 2 && IsPinYear(YYYYvalue)) n++;
        writeDay(n)
    }
    function writeDay(n) //据条件写日期的下拉框
    {
        var s = strDD.substring(0, strDD.length - 9);
        for (var i = 1; i < (n + 1); i++)
            s += "<option value='" + i + "'> " + i + "</option>\r\n";
        document.form1.DD.outerHTML = s + "</select>";
    }
    function IsPinYear(year)//判断是否闰平年
    {
        return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0))
    }
    var i=1;
    function add() {
       // document.write('<tr>');
        var sNum = '100'+i;
        var sName=document.getElementById('user').value;
        var year=document.getElementById('year').value;
        var month=document.getElementById('month').value;
        var day=document.getElementById('day').value;
        if(document.getElementById('male').checked){
            sex='女';
        }else{
            sex='男';
        }
       // var sex=document.getElementsByName('sex')[0].value;
        var _table=document.getElementById('tb');
        //console.log(_table);
        var tr1=document.createElement('tr');
        tr1.id=i;
        _table.appendChild(tr1)
        //第一个单元格
        var td1=document.createElement('td');
        td1.appendChild(document.createTextNode(sNum));
        //第二个单元格
        var td2=document.createElement('td');
        td2.appendChild(document.createTextNode(sName));
        //第三个单元格
        var td3=document.createElement('td');
        td3.appendChild(document.createTextNode(year+'年'+month+'月'+day+'日'));
        //第四个单元格
        var td4=document.createElement('td');
        td4.appendChild(document.createTextNode(sex));
        var td5=document.createElement('td');
        var oBtn=document.createElement('button');
        oBtn.appendChild(document.createTextNode('删除'))

        oBtn.id=i;
        //console.log(oBtn.id);
        oBtn.onclick=function(){
            console.log(tr1.id)
           del(tr1.id);

        }

        td5.appendChild(oBtn);
        tr1.appendChild(td1);
        tr1.appendChild(td2);
        tr1.appendChild(td3);
        tr1.appendChild(td4);
        tr1.appendChild(td5)
        i++;
    }

    function del(obj){
        var b=document.getElementById(obj);
        console.log(obj)
        b.remove();
    }
    //--></script>
</head>
<body>

<fieldset>
    <legend>添加操作</legend>
    <lable>姓名：</lable>
    <input id="user" type="text" name="username" ><br>
    <lable>出生年月日：</lable>
    <form name=form1>
        <select id="year" name=YYYY onchange="YYYYMM(this.value)">
            <option  value="">年</option>
        </select>
        <select id="month" name=MM onchange="MMDD(this.value)">
            <option value="">月</option>
        </select>
        <select id="day" name=DD>
            <option value="">日</option>
        </select></form>
    <br>
    <lable>性别：</lable>
    <input type="radio" value="男" name="sex" checked="checked">男
    <input type="radio" name='sex' value="女" id="male">女<br>
    <button onclick="add()">添加数据</button>
    <hr style="margin-top: 70px">
    <br><br><br><br>
    <table border="1px" id="tb">
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
</fieldset>
</body>
</html>