JavaScript操作Table

就一个简单的Table，开始我们的钻研

<table id="DetailInfo">
        <tbody>
            <tr>
                <th style="width: 30px;">
                    <input id="chbAll" type="checkbox" onclick="fnSelectAll(this);" /></th>
                <th>
                    标题1</th>
                <th>
                    标题2</th>
                <th>
                    标题3</th>
                <th>
                    标题4</th>
                <th>
                    标题5</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th  style="width: 30px;">
                    合计:</th>
                <th>
                    &nbsp;</th>
                <th>
                    &nbsp;</th>
                <th>
                    &nbsp;</th>
                <th>
                    &nbsp;</th>
                <th>
                    &nbsp;</th>
            </tr>
        </tfoot>
</table>

 
首先声明一个数组参数，用来保存Table值
var globalArrays=new Array();   // var globalArrays=[];
添加一行]]

AddRow
function AddRow()
{
        var newItem;//保存table值，便于后台操作

        var table=document.getElementById("DetailInfo");
        var oBody=table.tBodies[0];
        var rowIndex=oBody.rows.length;
        
        oBody.insertRow(rowIndex);
        //checkBox
        oBody.rows[rowIndex].insertCell(0);
        oBody.rows[rowIndex].cells[0].appendChild(document.createElement("<input id=\"chbChild\" value=\""+rowIndex+"\"  type=\"checkbox\" />"));
        //oBody.rows[rowIndex].cells[0].className = "tableNext";


        //标题1
        oBody.rows[rowIndex].insertCell(1);
        oBody.rows[rowIndex].cells[1].appendChild(document.createTextNode("1"));
        oBody.rows[rowIndex].cells[1].noWrap=true;
        newItem="1";
        //标题2
        oBody.rows[rowIndex].insertCell(2);
        oBody.rows[rowIndex].cells[2].appendChild(document.createTextNode("2"));
        oBody.rows[rowIndex].cells[2].noWrap=true;
        newItem=newItem + "," +"2";
        //标题3
        oBody.rows[rowIndex].insertCell(3);
        oBody.rows[rowIndex].cells[3].appendChild(document.createTextNode("3"));
        oBody.rows[rowIndex].cells[3].noWrap=true;
        newItem=newItem + "," +"3";   
        //标题4
        oBody.rows[rowIndex].insertCell(4);
        oBody.rows[rowIndex].cells[4].appendChild(document.createTextNode("4"));
        oBody.rows[rowIndex].cells[4].noWrap=true;  
        newItem=newItem + "," +"4";
        //标题5
        oBody.rows[rowIndex].insertCell(5);
        oBody.rows[rowIndex].cells[5].appendChild(document.createTextNode("5"));
        oBody.rows[rowIndex].cells[5].noWrap=true;   
        newItem=newItem + "," +"5";

        globalArrays.push(newItem);
}

删除 ]]

Del
     function GetCheckboxs()
    {
        var table=document.getElementById("DetailInfo");
        var oBody=table.tBodies[0];
        var rows=oBody.rows;
        var arrays=new Array();
        
        for(var i=1;i<rows.length;i++)
        {
            if(rows[i].cells[0].childNodes[0].checked)
            {
                arrays.push(i);
            }
        }  
        
        DeleteRow(arrays);
        DeleteData(arrays);
    }
    function DeleteRow(arrays)
    {
        var table=document.getElementById("DetailInfo");
        var oBody=table.tBodies[0];
        arrays.reverse();
        for(var i=0;i<arrays.length;i++)
        {
            oBody.deleteRow(arrays[i]);
        }
    }
    function DeleteData(arrays)
    {
        //arrays.reverse();
        for(var i=0;i<arrays.length;i++)
        {
            globalArrays.splice(arrays[i]-1,1);
        }
    }

全选（Checkbox）

  // 选择全部
function fnSelectAll(oEven)
{
    var chbChilds = document.getElementsByTagName( " input " );
     for  (var i = 0 ;i < chbChilds.length;i ++ )
    {
         if  (chbChilds[i].type == " checkbox "   &&  chbChilds[i].id == " chbChild " )
        {
             if (oEven. checked == true )
            {
                chbChilds[i]. checked = true ;
            }
             else
            {
                chbChilds[i]. checked = false ;    
            }                
        }
    }
} 

好，进行到这里，下一步通常就该是保存操作了吧。因此是时候将globalArrays保存的值提交到一个隐藏着的服务器控件上了。

     function fnChange()
     {
        var hf = document.getElementById( " hf " );
        hf.innerText = globalArrays.join( ' _ ' );    
     }

 

下面介绍操作合计行

< script type = " text/javascript " >
     ///  js.获取并记算出合计
     ///  
    function GetInAll()
    {
        var table = document.getElementById( " DetailInfo " );
        var oBody = table.tBodies[ 0 ];
        var oFoot = table.tFoot;
        
        var rows = oBody.rows;
        var iamoney = 0 ;
         for (var i =1 ;i < rows.length;i ++ )
        {
             if (rows[i].cells[ 5 ].innerText.length == 0 )
            {
                 continue ;
            }
             else
            {
                iamoney  = parseFloat(iamoney) + parseFloat(rows[i].cells[ 5 ].innerText);
            }
        }
        oFoot.rows[ 0 ].cells[ 5 ].innerText = iamoney;
    }
</ script >

如果以上写标题时用<thead></thead>包括<tr>的话，此处for循环应该从0开始索引。
//改日再介绍...
练习下载： jsForTable.rar