Home/ Questions/Q 6345281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T20:47:35+00:00

I have an HTML table with input elements that I am using for batch

  • 0

I have an HTML table with input elements that I am using for batch editing. I have constructed a skelton html example below. Could someone please help me figure out how to do something like the following:

  • add a selector to each of the “Quantity” fields, e.g. .change()
  • get the value in the Quantity and Amount fields, e.g. .val()
  • update the Total field, e.g. .text()

The main challenge is that the HTML is generated by my View in my ASP.Net MVC application, and the naming convention for the input id is “objectName_indexNumber_propertName” — e.g. MyObject_1_Quantity.

Would I just do a for-loop / .each(), and then do string manimpulation to get the id and do my magic? Is there a better way? Thanks.

<!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">
<head>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // how do I select all of them?
            $('#MyObject_1_Quantity').change(DoCalculation);
        });

        function DoCalculation() {
            alert("what should I do here? I need to know the index/row I'm in, and which cell triggered me.");

        }
    </script>

</head>
<body>

    <p>Test jquery Selector</p>
    <table>
        <tr>
            <td>Row 1</td>
            <td><input type="text" id="MyObject_1_Quantity" /></td>
            <td><input type="text" id="MyObject_1_Rate" /></td>
            <td><span id="MyObject_1_Total">$100.00</span></td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td><input type="text" id="MyObject_2_Quantity" /></td>
            <td><input type="text" id="MyObject_2_Rate" /></td>
            <td><span id="MyObject_2_Total">$100.00</span></td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td><input type="text" id="MyObject_3_Quantity" /></td>
            <td><input type="text" id="MyObject_3_Rate" /></td>
            <td><span id="MyObject_3_Total">$100.00</span></td>
        </tr>            
    </table>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This places a handler on the 2nd <td> in each row. Then this in the handler will be that input, so you can get the nested input and the adjacent cells to to the calculation, and set the value in the <span>.

    Example: http://jsfiddle.net/Skjbv/1/

    $(document).ready(function() {
    $('table tr td:nth-child(2)').change(DoCalculation);
});

function DoCalculation() {
    var row = this.parentNode;
    input1 = this.firstChild.value;
    input2 = row.cells[2].firstChild.value;
    span =   row.cells[3].firstChild;

     // convert to Number----v----------v
    span.innerHTML = ('$' + (~~input1 * ~~input2).toFixed(2));
     // create string with 2 decimal places-----------^

}

    If it isn’t quite so consistent that you can rely on the 2nd cell, then you could change the DOM selection to this, which places the handler directly on the input:

    Example: http://jsfiddle.net/Skjbv/3/

    $(document).ready(function() {
    $('table tr td input[id$="_Quantity"]').change(DoCalculation);
});

function DoCalculation() {
    var row = $(this).closest('tr');
    input1 = this.value;
    input2 = row.find('input[id$="_Rate"]').val();
    span = row.find('span[id$="_Total"]');

    span.html('$' + (~~input1 * ~~input2).toFixed(2));
}

    These use the attribute-ends-with-selector[docs] to select the elements with the proper value at the end of the ID attribute.

    • 0