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=[];
添加一行]]

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);
}

删除]]

     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