zoukankan      html  css  js  c++  java
  • JavaScript操作Table

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

    <table id="DetailInfo">
            
    <tbody>
                
    <tr>
                    <th style=" 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=" 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
    删除]]
    Del

    全选(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
  • 相关阅读:
    UVALive 7141 BombX
    CodeForces 722D Generating Sets
    CodeForces 722C Destroying Array
    CodeForces 721D Maxim and Array
    CodeForces 721C Journey
    CodeForces 415D Mashmokh and ACM
    CodeForces 718C Sasha and Array
    CodeForces 635C XOR Equation
    CodeForces 631D Messenger
    田忌赛马问题
  • 原文地址:https://www.cnblogs.com/xvqm00/p/1407729.html
Copyright © 2011-2022 走看看