table添加内容

来源：互联网发布：2016网络最火的神曲编辑：程序博客网时间：2024/06/04 19:00

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><script>  window.onload=function(){    var oTab=document.getElementById('tab');    var oName=document.getElementById('name');    var oAge=document.getElementById('age');    var oBtn=document.getElementById('btn');    oBtn.onclick=function(){      var oTr=document.createElement('tr');      var oTd=document.createElement('td');      oTd.innerHTML=oTab.tBodies[0].rows.length+1;      oTr.appendChild(oTd);//      添加姓名      var oTd=document.createElement('td');      oTd.innerHTML=oName.value;      oTr.appendChild(oTd);//      添加年龄      var oTd=document.createElement('td');      oTd.innerHTML=oAge.value;      oTr.appendChild(oTd);      oTab.tBodies[0].appendChild(oTr);    }  }</script><body>姓名：<input type="text" id="name" />年龄：<input type="text" id="age" /><button id="btn">添加</button><table width="500px" id="tab" border="1">  <thead>    <tr>      <th>id</th>      <th>姓名</th>      <th>年龄</th>    </tr>  </thead>  <tbody>  </tbody></table></body></html>

阅读全文

0 0