Javascript实现动态表格

效果如下:


Javascript实现动态表格_第1张图片

<script type="text/javascript">

    function AddTR(){

       //取得新增行数的ID

       var idval = document.getElementById("idval").value;

       var table = document.getElementById("mytable");  //取得表格对象

       //取得表格的行数

       var index = table.rows.length;                     

       var nextRow = table.insertRow(index);//取得表格的行对象

       nextRow.setAttribute("id",idval);//设置td的属性

       var firstTD = nextRow.insertCell();//取得添加行第一个列对象

       firstTD.setAttribute("height","20px");//设置高度属性值

       firstTD.innerHTML=idval;

       var secondTD = nextRow.insertCell();   //取得添加行第二个列对象

       secondTD.innerHTML=""+idval+"";

       var thirdTD = nextRow.insertCell();    //取得添加行第三个列对象

       thirdTD.setAttribute("align","center");

       thirdTD.innerHTML=

       "删除";

       idval++;

       document.getElementById("idval").value=idval;

    }

    function deleteTR(id){

       var table = document.getElementById("mytable");//取得表格对象

       var row = document.getElementById(id); //取得行对象

       var index = row.rowIndex;//取得行数的索引值

       table.deleteRow(index);  //删除指定行

    }

 


 

script>

head>

<body>

<div><a href="#" onclick="AddTR()">添加a>div>

<table id="mytable">

    <tr>

       <th>idth>

       <th>行数th>

       <th>操作th>

    tr>

    <tr id="1">

       <td>1td>

       <td>1td>

       <td align="center"><a href="#" onclick="deleteTR(1)">删除

       a>td>

    tr>

table>

<input type="hidden" value="2" id="idval"/>

body>

 

你可能感兴趣的:(JavaScript)