又一个动态控制表格的效果,用 JavaScript 动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能,接下来通过代码实例给大家介绍 JavaScript 实现动态添加删除表格的行,需要的朋友参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
又一个动态控制表格的效果,用 JavaScript 动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。
1.jsp
- <table id="viewTabs">
- <thead>
- <tr>
- <th>
- 产品名称
- </th>
- <th>
- 编号
- </th>
- <th>
- 数量
- </th>
- <th>
- 重量
- </th>
- <th>
- 操作
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <input name="productName" type="text">
- </td>
- <td>
- <input name="productNumber" type="text">
- </td>
- <td>
- <input name="quantity" type="text">
- </td>
- <td>
- <input name="weight" type="text">
- </td>
- <td>
- </td>
- </tr>
- </tbody>
- </table>
- <button type="button" onclick="addTable();" style="margin-left: 750px;">
- 添加行
- </button>
2.js
- //添加行
- function addTable(){
- var tab=document.getElementById("viewTabs"); //获得表格
- var colsNum=tab.rows.item(0).cells.length; //表格的列数
- //表格当前的行数
- var num=document.getElementById("viewTabs").rows.length;
- var rownum=num;
- tab.insertRow(rownum);
- for(var i=0;i<4; i++)
- {
- tab.rows[rownum].insertCell(i);//插入列
- if(i==0){
- tab.rows[rownum].cells[i].innerhtml=
- '<input name="productName" type="text"/>';
- }else if(i==1){
- tab.rows[rownum].cells[i].innerHTML='<input name="productNumber" type="text"/>';
- }else if(i==2){
- tab.rows[rownum].cells[i].innerHTML='<input name="quantity" type="text"/>';
- }else{
- tab.rows[rownum].cells[i].innerHTML='<input name="weight" type="text"/>';
- }
- }
- tab.rows[rownum].insertCell(i);
- tab.rows[rownum].cells[i].innerHTML='<a href="#" onclick="delRow(this)">删除行</a>';
- }
- //删除行
- function delRow(obj)
- {
- var Row=obj.parentNode;
- var Row=obj.parentNode; //tr
- while(Row.tagName.toLowerCase()!="tr")
- {
- Row=Row.parentNode;
- }
- Row.parentNode.removeChild(Row); //删除行
- }
来源: http://www.phperz.com/article/17/0216/267263.html