js 动态操作表格

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>增加Table行</title>
    </head>
    <script>
        function addRow(tabId)
        {
        	var tab = document.getElementById(tabId);
	        //添加一行
	     
	         var colCount = getColCount(tabId);
	         var rowCount = getRowCount(tabId);


  			 var newTr = tab.insertRow();

 				
  			 if(0 == rowCount)
  			 {
  			 	colCount = 1;
  			 }

	        for(var i = 0; i < colCount; ++i)
	        {
	        	var tmp = newTr.insertCell();
	        	tmp.innerHTML = '<input type=text value="">'; 

	        }
        }

        function addCell(tabId)
        {
        	var tab = document.getElementById(tabId);

        	var rowCount = getRowCount(tabId);


        	for(var i = 0; i < rowCount;++i)
        	{
        		var tmp = tab.rows.item(i).insertCell();
        		tmp.innerHTML = '<input type=text value="">'; 

        	}

        }

        function delRow(tabId)
        {
        	var rowCount = getRowCount(tabId);

        	if(rowCount <= 0)
        	{
        		return;
        	}
        	var tab = document.getElementById(tabId);

        	tab.deleteRow(rowCount - 1);
        }

        function delCell(tabId)
        {
        	   	var tab = document.getElementById(tabId);
        	   	var rowCount = getRowCount(tabId);

        	   	if(rowCount > 0)
        	   	{
        	   		var colCount = getColCount(tabId);

        	   		if(1 >= colCount)
        	   		{
					 	clearTable(tabId);
				 
        	   		}
        	   		else
        	   		{
						for ( var i = 0; i < tab.rows.length; i++) 
						{
							tab.rows[i].deleteCell(colCount - 1);
						}
        	   		}
        	   	}
        }


        function clearTable(tabId)
        {
			var tab = document.getElementById(tabId);
						while(tab.hasChildNodes()){
						tab.removeChild(tab.lastChild);
					}
        }



        function getRowCount(tabId)
        {
			var tab = document.getElementById(tabId) ;  
      		//表格行数  

      		var rows = 0;
      		if(null != tab.rows)
      		{
      			 rows = tab.rows.length ;
      		}
      		else
      		{
      			alert("no rows");
      			rows = 0;
      		}
      		

      		return rows  
        }

        function getColCount(tabId)
        {

        	var tab = document.getElementById(tabId) ;  

        	var cells = 0;
        	if(null != tab.rows && tab.rows.length > 0)
        	{
        		cells = tab.rows.item(0).cells.length;
   
        	}
    		 return cells;
        }


/*
 * 提取一个表单的数据 
 */
function formatTableData(tableId ) {
	var ret = "";
	var t3 = document.getElementById(tableId);
 
	for ( var i = 0; i < t3.rows.length; i++) {
		for ( var j = 0; j < t3.rows[i].cells.length; j++) {
			ret = ret + t3.rows[i].cells[j].children[0].value + "#";
		}
	}

	alert(ret);
	return ret;
}



    </script>
    <body>
        <table id="testTbl" border=1 >
            <tr id="tr1">
                <td > 
					<input type=text value="12345"> </input> 
                </td>
            </tr>
            <tr id="tr2">
            
                <td ><input type=text value="1bb"> </input> </td>
            </tr>
            <tr id="tr3">
             
                <td  > 	<input type=text value="1cc"> </input> </td>
            </tr>
        </table>        
        <br />
        <input type="button" id="add" onclick="addRow('testTbl');" value="Add Row" />
		<input type="button" id="addcel" onclick="addCell('testTbl');" value="Add Cell" />

		<br />
		      <input type="button" id="delRow" onclick="delRow('testTbl');" value="remove Row" />
		<input type="button" id="delcel" onclick="delCell('testTbl');" value="remove Cell" />
		<br />

		<input type="button" id="delcel" onclick="formatTableData('testTbl');" value="get data" />
    </body>
</html>