`
jtlyuan
  • 浏览: 65212 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Javascript实现动态表格

 
阅读更多

效果如下：


<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=

       "<a href='#' onclick='deleteTR("+idval+")'>删除</a>";

       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>id值</th>

       <th>行数</th>

       <th>操作</th>

    </tr>

    <tr id="1">

       <td>1</td>

       <td>第1行</td>

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

       </a></td>

    </tr>

</table>

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

</body>

 

  • 大小: 23.6 KB
分享到：
| 利用Servlet导出Excel
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics