黑马程序员技术交流社区

标题: 【成都校区】日记，script删改页面修改前&修改后 [打印本页]

作者: 幻觉 时间: 2018-12-13 13:07
标题: 【成都校区】日记，script删改页面修改前&修改后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
      th{
         padding: 5px;
         padding-right: 20px;
         padding-left: 20px;
         text-align: center;
      }
      td{
         border: solid 1px;
      }
      #div1{
         margin-left: 200px;
         margin-top: 50px;
      }
</style>

</head>
<body>
<div id="div1">
<input type="text" name="id" id="id">
<input type="text" name="name" id="name">
<input type="text" name="sex" id="sex">
<input type="button" id="inp-bun" name="but" value="添加">
</div>

<table align="center" border="1px" id="tab">
<caption>学生登记表</caption>
<tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>操作</th>
</tr>
</table>
<script>

/* document.getElementById("inp-bun").onclick=function () {
var tab= document.getElementsByTagName("table")[0];
   var id =  document.getElementById("id").value;
   var name= document.getElementById("name").value;
   var sex= document.getElementById("sex").value;
      var tt_id=document.createTextNode(id);
      var tt_name=document.createTextNode(name);
      var tt_sex=document.createTextNode(sex);
      var tr= document.createElement("tr");
      var a= document.createElement("a");
      var tr_= tab.appendChild(tr);
      var td_id= tr_.appendChild(document.createElement("td"));
      var td_name= tr_.appendChild(document.createElement("td"));
      var td_sex= tr_.appendChild(document.createElement("td"));
      var sub=tr_.appendChild(document.createElement("td"));
      a.setAttribute("href","JavaScript:void(0);");
      a.setAttribute("onclick","delTr(this);");
      a.innerHTML="删除";
      td_id.appendChild(tt_id);
      td_name.appendChild(tt_name);
      td_sex.appendChild(tt_sex);
   sub.appendChild(a);
};*/
document.getElementById("inp-bun").onclick=function () {
   var tab= document.getElementsByTagName("table")[0];
      var id =  document.getElementById("id").value;
      var name= document.getElementById("name").value;
      var sex= document.getElementById("sex").value;
      tab.innerHTML+="<tr>\n" +
         "       <td>"+id+"</td>\n" +
         "       <td>"+name+"</td>\n" +
         "       <td>"+sex+"</td>\n" +
         "       <td>"+"<a href='JavaScript:void(0);' onclick='delTr(this)'>删除</a>"+"</td>\n" +
         " </tr>"

};
function delTr(obj) {
   var table=  obj.parentElement.parentElement.parentElement;
   var tr=obj.parentElement.parentElement;
   table.removeChild(tr);
}

</script>
</body>
</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2