JavaScript操作Table

一个Table，开始我们的钻研

<table id="DetailInfo">
        <tbody>
            <tr>
                <th >
                    <input /></th>
                <th>
                    标题1</th>
                <th>
                    标题2</th>
                <th>
                    标题3</th>
                <th>
                    标题4</th>
                <th>
                    标题5</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th  >
                    合计:</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=[];
添加一行]]

 

;

        globalArrays.push(newItem);
}

复制代码

删除]]

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

复制代码

<table id="DetailInfo">
        <tbody>
            <tr>
                <th >
                    <input /></th>
                <th>
                    标题1</th>
                <th>
                    标题2</th>
                <th>
                    标题3</th>
                <th>
                    标题4</th>
                <th>
                    标题5</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th  >
                    合计:</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=[];
添加一行]]

 

;

        globalArrays.push(newItem);
}

复制代码

删除]]

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

复制代码