「已注销」 2017-05-29 00:10 采纳率: 0%
浏览 4024

JavaScript中table遍历列的求和

我想把价格那列输入的值总动求和显示到总价格哪一行中的文本框图片说明

 <html>
<head>
<style type="text/css">

    .yangshi
        {
        background:url(images/girl.jpg)no-repeat;
        height:348px;
        background-position: 0px 150px;
        }

    .test
        {
        text-align: right;
        width:80px;
        }
</style>
<script type="text/javascript">

//window.onload=function(){
//                var bt=document.getElementById("look");
//                var btt=document.getElementById("price");
//                bt.onclick=function(){
//                    alert(btt.value);
//                }
//            }

// 此方法是alert出文本框中输入的值
function getprice(rowNum)
{

    var id = 'price0'+rowNum;
    var price = document.getElementById(id);
    alert(price.value);
}



//此方法是计算出被选中的价格的总价(自己注意传参和不需要传参的理解)
function sumPrice(tableid)
{ 

     var sum = 0;
     var tableObj = document.getElementById(tableid);

     for (var i = 0; i < tableObj.rows.length; i++){  
                //遍历Table的所有Row
        var checkBox = document.getElementById('checkbox0'+i); 
        //判断
            if(checkBox != null && checkBox.checked){
                var id = 'price0'+i;
                var price = document.getElementById(id);
                alert(price.value);
                sum = parseInt(sum) + parseInt(price.value); 

            }

    }
     alert(sum);

}


//此方法是判断文本框中是否有值 如果有则button好用 如果没有则button禁用
//第一步首先光标离开触发onblur事件
//第二步判断text是否为null和''
//第三步如果为null和''则button禁用 反之button可用(前提定位到按钮在哪)

function textOnblur(value)
{
    var sum = 0;
    var tableObj = document.getElementById('shoptable');

    var id = 'price0'+value;
    var price = document.getElementById(id);

    var btnid = 'btn0'+value;
    var btnids = document.getElementById(btnid);

    //alert(btnids.id);
    for (var i = 0; i < tableObj.rows.length; i++){
        //遍历table所有row

        if(price.value != null && price.value != ''){

            document.getElementById(btnids.id).disabled="";//按钮有效
            sum = parseInt(sum) + parseInt(price.value);
            break;

        }else{
            document.getElementById(btnids.id).disabled="disabled";//按钮无效
            sum = sum + 0;
            //alert(sum.value);


        }

    //现在是没有值的时候也循环 且
    }   
    document.getElementById("allPrice").value = parseInt(sum);

            //alert(sumPrice);

}

</script>
</head>






<body>
        <h1>购物价格表</h1>
    <form action="#" method = "post">
    <table border="1" id="shoptable">
        <thead style="background: #0FF">
        <tr>
            <th>序号</th>
            <th>选择</th>
            <th>图片</th> 
            <th>简介</th>
            <th>价格</th>
            <td>查看信息</td>
            <th>查看</th>



        </tr>
        </thead>
        <tbody style=" background: #9CC">
        <tr>
            <td align="center">1</td>
            <td align="center"><input id="checkbox00" type="checkbox" name="checkbox1" value="checkbox1" /></td>
            <td><img src="images/black.jpg" style="width:50px;height:50px" /></td>  
            <td>这个图片是黑色的你没看错!</td>
            <td align="right"><input type="text" id="price00" class="test" onblur="textOnblur(0)" /></td>
            <td><a href="black.html">查看信息</a></td>
            <td><input type="button" value="查看" onclick="getprice('0')" id="btn00" /></td>


        </tr>
        <tr>
            <td align="center">2</td>
            <td align="center"><input id="checkbox01" type="checkbox" name="checkbox2" value="checkbox2" /></td>
            <td><img src="images/red.jpg" style="width:50px;height:50px" /></td>    
            <td>这个图片是红色的你没看错!</td>
            <td align="right"><input type="text" class="test" maxlength="3" id="price01" onblur="textOnblur(1)" /></td>
            <td><a href="black.html">查看信息</a></td>
            <td><input id="btn01" type="button" value="查看" onclick="getprice('1')" /></td>

        </tr>
        <tr>
            <td align="center">3</td>
            <td align="center"><input id="checkbox02" type="checkbox" name="checkbox3" value="checkbox3" /></td>
            <td><img src="images/blue.jpg" style="width:50px;height:50px" /></td>   
            <td>这个图片是蓝色的你没看错!</td>
            <td align="right"><input type="text" class="test" maxlength="3" id="price02" onblur="textOnblur(2)" /></td>
            <td><a href="black.html">查看信息</a></td>
            <td><input id="btn02" type="button" value="查看" onclick="getprice('2')" /></td>

        </tr>
        <tr>
            <td align="center">4</td>
            <td align="center"><input id="checkbox03" type="checkbox" name="checkbox4" value="checkbox4" /></td>
            <td><img src="images/green.jpg" style="width:50px;height:50px" /></td>  
            <td>这个图片是绿色的你没看错!</td>
            <td align="right"><input type="text" class="test" maxlength="3" id="price03" onblur="textOnblur(3)" /></td>
            <td><a href="black.html">查看信息</a></td>
            <td><input id="btn03" type="button" value="查看" onclick="getprice('3')" /></td>

        </tr>
        </tbody>
        <tfoot style=" background: red">
            <td align="center">5</td>
            <td align="center">无</td>
            <td><img src="images/girl.jpg" style="width:50px;height:50px" /></td>   
            <td>以上是所有的商品!</td>
            <td>总价:<input type="text" class="test" id="allPrice" /></td>
            <td><a href="black.html">查看信息</a></td>
            <td><input id="btn04" type="button" value="查看" /></td>
        </tfoot>




    </table>




            <input type="submit" value="提交" onclick="sumPrice('shoptable')"/>
            <input type="reset"  value="重置" />













</form >




<div class="yangshi">


aaaaaaaaaaaa




</div>






</body>







</html>

这是我的代码

  • 写回答

3条回答 默认 最新

  • YXTS122 2017-05-29 02:03
    关注

    不是很清楚你到底想问什么。。。。。。。

    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗