首页 > 代码库 > html中动态创建表格

html中动态创建表格

2024-07-17 07:01:28   223人阅读

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>dtTable.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->

<script type="text/javascript">

//dom结构绘制完毕,页面的所有关联的文件必须加载完毕（图片）

window.onload=function(){

document.getElementById("addUser").onclick=function(){

/*************************************************************************/

//获取文本框中的值

var nameValue=http://www.mamicode.com/document.getElementById("name").value;

var emailValue=http://www.mamicode.com/document.getElementById("email").value;

var telValue=http://www.mamicode.com/document.getElementById("tel").value;

/*************************************************************************/

//创建nametd

var nameTd=document.createElement("td");

var nameText=document.createTextNode(nameValue);

nameTd.appendChild(nameText);

//创建emailtd

var emailTd=document.createElement("td");

var emailText=document.createTextNode(emailValue);

emailTd.appendChild(emailText);

//创建teltd

var telTd=document.createElement("td");

var telText=document.createTextNode(telValue);

telTd.appendChild(telText);

//创建atd

var aTd=document.createElement("td");//元素节点

var aElement=document.createElement("a");

aElement.setAttribute("href","index.html?id="+nameValue );

var deleteText=document.createTextNode("Delete");//内容节点

aElement.appendChild(deleteText)

aTd.appendChild(aElement);

/*************************************************************************/

//创建tr

var trElement=document.createElement("tr");

//增加td到tr上

trElement.appendChild(nameTd);

trElement.appendChild(emailTd);

trElement.appendChild(telTd);

trElement.appendChild(aTd);

/*************************************************************************/

//增加tr到tbody上

var tableElement=document.getElementById("usertable");

//创建tbody,为了跨浏览器

var tbodyElement=document.createElement("tbody");

tbodyElement.appendChild(trElement);

tableElement.appendChild(tbodyElement);

/*************************************************************************/

//删除

aElement.onclick=function(){

//使网页的链接失效

return delTr(aElement);

}

/*************************************************************************/

}

}

function delTr(aElement){

var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;

//alert(name)

var flag=window.confirm("您真的要删除"+name+"这个用户吗？");

if(!flag){

return false;

}

//获取tbody

var tbodyElement=aElement.parentNode.parentNode.parentNode;

//获取tr

var trElement=aElement.parentNode.parentNode;

//删除

tbodyElement.removeChild(trElement);

//是网页链接失效

return false;

}

</script>

  </head>

  

  <body>

      <center>

        <br><br>

                      添加用户：<br><br>

                      姓名：<input type="text" name="name" id="name"/>&nbsp;&nbsp;

        email：<input type="text" name="email" id="email"/>&nbsp;&nbsp;

                      电话：<input type="text" name="tel" id="tel"/><br/><br/>

      <button id="addUser">提交</button>

      <br/><br/>

      <hr/>

      <br/><br/>

      <table id="usertable" border="1" cellpadding="5" cellspacing="0">

      <tr>

      <th>姓名</th>

      <th>email</th>

      <th>电话</th>

      <th>操作</th>

      </tr>

      <tr>

      <td>Tom</td>

      <td>tom@tom.com</td>

      <td>100000</td>

      <td><a href="http://www.mamicode.com/deleteEmp?id=Tom">Delete</a></td>

      </tr>

      </table>

      

      </center>

  </body>

</html>


联系
我们