功能很低级的表格动态添加删除行

62 阅读 0 评论 41 点赞

我是靠谱客的博主高高大侠，最近开发中收集的这篇文章主要介绍功能很低级的表格动态添加删除行，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

表格动态添加删除行。很初级的版本，很久了。自己存档下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  
<style type="text/css">   
th{background-color:#00CCFF;text-align:left;padding:2px 12px;}   
td{background-color:#eee;border-bottom:1px solid #ccc;padding:2px 12px;}   
.mart_20{margin-top:20px;}   
</style>  
</head>  
<body>  
<table width="500" border="0" cellspacing="0" cellpadding="0" id="tbl">  
    <tr>  
        <th>Title 1</th>  
        <th>Title 2</th>  
        <th>Operation</th>  
    </tr>  
</table>  
<input class="mart_20" type="button" value="Add New" οnclick="addNew()" />  
  
  
<script type="text/javascript" language="javascript">   
    var tableCon=document.getElementById("tbl");    //获取table   
    /*添加行操作*/   
    function addNew(){   
        var tdNum = tableCon.rows.length ;          //获取表格列数   
        var newTR=tableCon.insertRow(tdNum);        //创建新行   
        for(i=0;i<tableCon.rows(0).cells.length;i++){   
            newTR.insertCell(i);                        //在新行中创建i个单元格   
        }           //第一列Index的数值   
        newTR.cells(0).innerHTML="<input type='text' />";         //第一列的IP地址输入框   
        newTR.cells(1).innerHTML="3";                               //第二列的数值   
        newTR.cells(2).innerHTML="<a href='#1' mce_href='#1' οnclick='deleteTR(this.parentNode.parentNode)'>delete</a>";        //删除按钮   
    }   
    /*删除行操作*/   
    function deleteTR(current){   
        current.parentNode.deleteRow(current.rowIndex);         //删除当前行   
    }   
</script>  
</body>  
</html>