js動態新增表格和刪除表格
阿新 • • 發佈:2018-11-12
<!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>