循环遍历HTML表,每次将名称增加1

时间:2014-10-02 09:01:02

标签: jquery html

对不起,如果这有点令人困惑,但我会尽力解释我想做的事。

我有一个包含3行和5列的表格。第4列有一个名称-td name =“csl1” - 对于第1行,-td name =“csl2” - 对于第2行,-td name =“csl3” - 对于第3行。第5列有一个名称-td name =“nsl1” - 对于第1行,-td name =“nsl2” - 对于第2行,-td name =“nsl3” - 对于第3行。

我正在尝试使用Jquery遍历名称,以便在单击按钮时获取其值...

$('#purcbutton').click(function(e){
        for(i = 1; i <4; i++){
            var csl = $("td[name=csl"+i"]").val();
            var nsl = $("td[name=nsl"+i"]").val();
            var total = parseInt(csl+nsl);
            $("td[name=csl"+i"]").val(price);
            }
    })

问题是这些部分“td [name = csl”+ i“]”似乎是错误的,我显然不允许把'i'放在中间。我对JQuery很新,不知道该怎么做。如果您需要更多信息,请询问。

- - - - - - - - HTML

            <form id="staffjobs" >

            <table id="stocktable" >
                <tr id="about" style="height: 35px;">
                  <td style="border-bottom: groove; text-align: center; width: 100px;">PLU Code</td> 
                  <td style="border-bottom: groove; text-align: center; width: 100px;">Product Name</td>
                  <td style="border-bottom: groove; text-align: center; width: 100px;">Price</td>
                  <td style="border-bottom: groove; text-align: center; width: 100px;">Current Stock Level</td>
                  <td style="border-bottom: groove; text-align: center; width: 100px;">New Stock Level</td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="14322" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="GreenB - Ivory White" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$1989.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl1" ><input value="12" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl1" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="14323" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="GreenB - Carbon Black" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$1989.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="4" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t2" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="34534" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Light Weight Aluminium" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$799.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl2" ><input value="11" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl2" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t3" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="34535" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="High-tech carbon fiber" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$1199.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl3" ><input value="3" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl3" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="63561" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Everyday" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$399.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="16" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="63562" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Endurance" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$729.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="10" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="63563" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Off Road" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$989.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="5" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="77885" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Standard V-Brake" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$34.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="18" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="77886" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Advanced V-Brake" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$59.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="13" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="77887" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Disc Brake" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$119.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="1" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="65532" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Nimh Battery Pack" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$479.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="27" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="65533" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Li-ion Battery Pack " type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$799.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="19" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="99853" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Wing Base Bar" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$269.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="5" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="99854" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="K-Wing Handlebar" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$399.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="7" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="99855" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Aeria T2" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$949.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="3" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="43446" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Basket" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$39.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="13" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="43447" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Tail Light" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$24.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="51" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="43448" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Bell" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$25.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="44" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>
                </tr>
                <tr id="about" name="t1" style="height: 35px;"> 
                  <td style="border-bottom: inset; text-align: center" name="plu" ><input value="43449" type="textbox" id="c1" style="height: 18px; width: 50px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="pname" ><input value="Heavy Duty Lock" type="textbox" id="c2" style="height: 18px; width: 160px; "></td>
                  <td style="border-bottom: inset; text-align: center" name="price" ><input value="$34.99" type="textbox" id="c3" style="height: 18px; width: 70px; text-align: right;"></td>
                  <td style="border-bottom: inset; text-align: center" name="csl" ><input value="32" type="number" id="c4" style="height: 18px; width: 40px; text-align: right;" readonly="true"></td>
                  <td style="border-bottom: inset; text-align: center" name="nsl" ><input  type="number" id="c5" style="height: 18px; width: 40px; text-align: right;"></td>

            </table>

            <p id="updatepos" style="top: 1000px;"><button id="purcbutton" type="button" title="Select a checkbox to update and remove" style="width: 70px; height: 30px; padding-top: 7px;">
                <p id="purcbuttonsty" style="font-family: Source Sans Pro; font-size: 14px;">Update</button></p></p>


            <script>
            $('#purcbutton').click(function(e){
             var csl,nsl,total;
            $('tr').each(function(){
                csl=$(this).children('td').eq(3).text();
                nsl=$(this).children('td').eq(4).text(); 
                total = parseInt(csl+nsl);
                $(this).children('td').eq(4).text(total); 
            });
            });
            </script>
        </form><br><br>

2 个答案:

答案 0 :(得分:1)

我认为最好的方法是使用each()功能,这样您就不需要命名tds或trs:

$('#purcbutton').click(function(e){
    var csl,nsl,total;
    $('tr').each(function(){
        csl=$(this).children('td').eq(3).children('input').val(); //the fourth column value
        nsl=$(this).children('td').eq(4).children('input').val(); //the fifth column value
        total = parseInt(csl+nsl);
        $(this).children('td').eq(4).children('input').val(total); //I think you meant "total" by "price" because I don't see any variable called "price"
    });
});

答案 1 :(得分:0)

问题出在jquery,&#34; 2&#34; +&#34; 3&#34; =&#34; 23&#34;。

你被接受的结果是5为该parsefloat(&#34; 2&#34;)+ parsefloat(&#34; 3&#34;)= 5

  $('#purcbutton').click(function(e){
    for(i = 1; i <4; i++){
        var csl = parseFloat($("td[name=csl"+i"]").text());
        var nsl =parseFloat $("td[name=nsl"+i"]").text());
        var total =parsecsl+nsl);
        $("td[name=csl"+i"]").text(price);
        }
})