计算并显示最后一个td中的值

时间:2011-07-19 19:13:54

标签: jquery

目标:
通过选择行来计算并显示tr中最后一个td的正确答案。例如,如果我选择第二行,我会得到值44,它应该应用在行的最后一行。

问题:
我知道如何在javascript中使用jQuery。

需要jQuery中的源代码帮助。

// fullmetalboy


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>index</title>

    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;

            var cell3 = row.insertCell(2);
            cell3.innerHTML = "22";

            var cell4 = row.insertCell(3);
            cell4.innerHTML = "";


        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) 
            {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];

                if(null != chkbox && true == chkbox.checked) 
                {
                    var sdf = 23;


                    //table.deleteRow(i);
                    //rowCount--;
                    //i--;
                }

            }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>


    </head>

    <body>

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Calculate selected row" onclick="deleteRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD>1</TD>
            <TD>22</TD>
            <TD></TD>            
        </TR>
    </TABLE>        



    </body>
</html>

1 个答案:

答案 0 :(得分:0)

您可以这样做(您可以检查多个列,并计算每行的结果):

$(document).ready(function(){
    $('#calculate').click(function(){
        $('input:checkbox:checked').each(function(){
          var first = parseInt($(this).closest('td').next('td').text(), 10);

         var sec = parseInt($(this).closest('td').next('td').next('td').text(), 10);
            var result = (first*sec);
            $(this).closest('tr').find('td:last').html(result)

        });
    });
});

Fidlle:http://jsfiddle.net/D2uVz/