您的位置：首页 > Web前端 > JavaScript

JavaScript DOM操作之表格操作(2)

2015-05-22 08:34 633 查看
/**

*DOM操作表格--(添加删除元素)

*是在tBodies里面添加元素
*/

HTML文件代码

<!DOCTYPE html>

<html>

  <head>

    <title>domTableOperate.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">

    <script type="text/javascript" src="../js/domTableOperate.js"></script>

  </head>

  <body>

NAME:<input type="text" id="name" width="300px" style="margin-top:50px;">

  AGE:<input type="text" id="age">

  <input type="button" value="ADDRow" id="btn"><br/>

    <table  border="1" width="500px;" id="tab1">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
<td>OPERATE</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>wsm</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>ali</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>lisi</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alid</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>skd</td>
<td>33</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>sawm</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>tim</td>
<td>20</td>
<td></td>
</tr>
</tbody>

    </table>

   </body>

</html>

js文件代码

window.onload = function(){

var table1 = document.getElementById('tab1');

    var name = document.getElementById('name');

    var age = document.getElementById('age');

    var btn = document.getElementById('btn');

    var id = table1.tBodies[0].rows.length+1;

    btn.onclick = function(){

    if(name.value.length> 0 && age.value.length> 0){ 
    var otr =  document.createElement('tr');
   
    var otd = document.createElement('td');
    otd.innerHTML = id++;
    otr.appendChild(otd);
   
    var otd = document.createElement('td');
    otd.innerHTML = name.value;
    otr.appendChild(otd);
   
    var otd = document.createElement('td');
    otd.innerHTML = age.value;
    otr.appendChild(otd);
   
    var otd = document.createElement('td');
    otd.innerHTML = '<a href="javascript:;">remove</a>';
    otr.appendChild(otd);
   
    otd.getElementsByTagName('a')[0].onclick = function(){
    table1.tBodies[0].removeChild(this.parentNode.parentNode);
    }
   
    table1.tBodies[0].appendChild(otr);
    age.value = '';
    name.value = '';
    }else{
    alert("Please fill in NAME and AGE!");
    }
    };

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航