将可排序表与复选框总和输出相结合

我当前的代码有一个复选框求和函数，它从数据库中获取值。

我还尝试将另一个 Javascript 代码应用到我的表中，以允许我对行中的数据进行排序。

例如，对行进行排序后，将所有 5 个 ACER 资产显示在顶部。我想勾选前 5 个显示的 ACER 资产的复选框并对它们求和。

这是我当前的代码：

<?php
    include('connect1.php');
    $retrieve = $db->prepare("SELECT count(*) FROM Asset");
    $retrieve->execute();
    $fetchrow = $retrieve->fetch(PDO::FETCH_NUM);
    $calculated=$fetchrow[0];
?>

<script type="text/javascript">

    function UpdateCost() {
        var sum = 0;
        var gn, elem;
        for (i=0; i<<?php echo $calculated ?>; i++) {
            gn = 'sum_m_'+i;
            elem = document.getElementById(gn);
            if (elem.checked == true) { sum += Number(elem.value); }
        }
        document.getElementById('totalcost' ).value = sum.toFixed(0);
    }
    window.onload=UpdateCost

</script>

<link rel="stylesheet" href="style.css" />

Total Cost : <input type="text" name="sen" id="totalcost" value="" />

<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
    <thead>
        <tr>
            <th><h3>Asset ID</h3></th>
            <th><h3>Vendor</h3></th>
            <th><h3>Hardware </h3></th>
            <th><h3>Cost</h3></th>
            <th><h3>Date Of Purchase</h3></th>
            <th><h3>Select Values</h3></th>

        </tr>
    </thead>
    <tbody>
        <?php
            // include('connect1.php'); you already included this file
            $result = $db->prepare("SELECT * FROM Asset");
            $result->bindParam(':userid', $res);
            $result->execute();
            for($i=0; $row = $result->fetch(); $i++){
            ?>
            <tr>
                <td><?php echo $row['Asset_ID']; ?></td>
                <td><?php echo $row['Vendor_Name']; ?></td>
                <td><?php echo $row['Hardware_ID']; ?></td>
                <td><?php echo $row['Asset_Cost']; ?></td>
                <td><?php echo $row['DateOfPurchase']; ?></td>
                <th><h3><INPUT TYPE="checkbox" NAME="items[]" value="<?php echo $row['Asset_Cost'] ?>" id="sum_m_<?php echo $i ?>" onclick="UpdateCost()"></h3></th>

            </tr>
            <?php
            }
        ?>
    </tbody>
</table>
<br />

<div id="controls">
    <div id="perpage">
        <select onchange="sorter.size(this.value)">
            <option value="5">5</option>
            <option value="10" selected="selected">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        <span>Entries Per Page</span>
        </div>
        <div id="navigation">
            <img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
            <img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
            <img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
            <img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
        </div>
        <div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
    </div> 

这是 JavaScript：

var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.table=function(){
    function sorter(n){this.n=n; this.pagesize=20; this.paginate=0}
    sorter.prototype.init=function(e,f){
        var t=ge(e), i=0; this.e=e; this.l=t.r.length; t.a=[];
        t.h=T$$('thead',T$(e))[0].rows[0]; t.w=t.h.cells.length;
        for(i;i<t.w;i++){
            var c=t.h.cells[i];
            if(c.className!='nosort'){
                c.className=this.head; c.onclick=new Function(this.n+'.wk(this.cellIndex)')
            }
        }
        for(i=0;i<this.l;i++){t.a[i]={}}
        if(f!=null){var a=new Function(this.n+'.wk('+f+')'); a()}
        if(this.paginate){this.g=1; this.pages()}
    };
    sorter.prototype.wk=function(y){
        var t=ge(this.e), x=t.h.cells[y], i=0;
        for(i;i<this.l;i++){
      t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].style.display='';
      while(v.hasChildNodes()){v=v.firstChild}
      t.a[i].v=v.nodeValue?v.nodeValue:''
    }
        for(i=0;i<t.w;i++){var c=t.h.cells[i]; if(c.className!='nosort'){c.className=this.head}}
        if(t.p==y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t.d=t.d?0:1}
        else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}
        var n=document.createElement('tbody');
        for(i=0;i<this.l;i++){
            var r=t.r[t.a[i].o].cloneNode(true); n.appendChild(r);
            r.className=i%2==0?this.even:this.odd; var cells=T$$('td',r);
            for(var z=0;z<t.w;z++){cells[z].className=y==z?i%2==0?this.evensel:this.oddsel:''}
        }
        t.replaceChild(n,t.b); if(this.paginate){this.size(this.pagesize)}
    };
    sorter.prototype.page=function(s){
        var t=ge(this.e), i=0, l=s+parseInt(this.pagesize);
        if(this.currentid&&this.limitid){T$(this.currentid).innerHTML=this.g}
        for(i;i<this.l;i++){t.r[i].style.display=i>=s&&i<l?'':'none'}
    };
    sorter.prototype.move=function(d,m){
        var s=d==1?(m?this.d:this.g+1):(m?1:this.g-1);
        if(s<=this.d&&s>0){this.g=s; this.page((s-1)*this.pagesize)}
    };
    sorter.prototype.size=function(s){
        this.pagesize=s; this.g=1; this.pages(); this.page(0);
        if(this.currentid&&this.limitid){T$(this.limitid).innerHTML=this.d}
    };
    sorter.prototype.pages=function(){this.d=Math.ceil(this.l/this.pagesize)};
    function ge(e){var t=T$(e); t.b=T$$('tbody',t)[0]; t.r=t.b.rows; return t};
    function cp(f,c){
        var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
        var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
        if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
        i=Date.parse(f); n=Date.parse(c);
        if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
        return g>h?1:(g<h?-1:0)
    };
    return{sorter:sorter}
}();

这是实际工作的可排序表：

<?php
    include('connect1.php');
    $retrieve = $db->prepare("SELECT count(*) FROM Asset");
    $retrieve->execute();
    $fetchrow = $retrieve->fetch(PDO::FETCH_NUM);
    $calculated=$fetchrow[0];
?>

<script type="text/javascript">

    function UpdateCost() {
        var sum = 0;
        var gn, elem;
        for (i=0; i<<?php echo $calculated ?>; i++) {
            gn = 'sum_m_'+i;
            elem = document.getElementById(gn);
            if (elem.checked == true) { sum += Number(elem.value); }
        }
        document.getElementById('totalcost' ).value = sum.toFixed(0);
    }
    window.onload=UpdateCost

</script>


<input type="button" value="Search" onclick="window.location.href='http://mp04.bit-mp.biz/Ashvin/SearchACost.php'" />

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Costing</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
        <thead>
            <tr>


                <th><h3>Asset ID</h3></th>
                <th><h3>Vendor</h3></th>
                <th><h3>Hardware </h3></th>
                <th><h3>Cost</h3></th>
                <th><h3><INPUT TYPE="checkbox" NAME="items[]" value="<?php echo $row['Asset_Cost'] ?>" id="sum_m_<?php echo $i ?>" onclick="UpdateCost()"></h3></th>

            </tr>
        </thead>



        <tbody>

        <?php

        mysql_connect("localhost","user","pass");
mysql_select_db("db");

$result = mysql_query("SELECT * FROM Asset");

        while($row = mysql_fetch_array($result)) 

         for($i=0; $row = $result->fetch(); $i++){
 { 


    echo "<tr>";

    echo "<td>" . $row['Asset_ID'] . "</td>"; 
    echo "<td>" . $row['Vendor_Name'] . "</td>"; 
    echo "<td>" . $row['Hardware_ID'] . "</td>"; 
    echo "<td>" . $row['Asset_Cost'] . "</td>"; 

    echo "</tr>";
 } 
         }
echo "</table>";

            ?>

        </tbody>
  </table>
    <div id="controls">
        <div id="perpage">
            <select onchange="sorter.size(this.value)">
            <option value="5">5</option>
                <option value="10" selected="selected">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <span>Entries Per Page</span>
        </div>
        <div id="navigation">
            <img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
            <img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
            <img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
            <img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
        </div>
        <div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
    </div>
    <script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
  var sorter = new TINY.table.sorter("sorter");
    sorter.head = "head";
    sorter.asc = "asc";
    sorter.desc = "desc";
    sorter.even = "evenrow";
    sorter.odd = "oddrow";
    sorter.evensel = "evenselected";
    sorter.oddsel = "oddselected";
    sorter.paginate = true;
    sorter.currentid = "currentpage";
    sorter.limitid = "pagelimit";
    sorter.init("table",1);
  </script>

</body>
</html>