Display Sum of dynamic generated TextBoxes in HTML Table Rows from Code Behind using jQuery

Last Reply one month ago By pandeyism

Posted one month ago

https://monosnap.com/image/BSMd1LRil5CpW1ohnZXBle9O9d96jK.png

I created a datatable in a c# method I will like to add up each textbox for it to be saved on the last textbox. The problem is I can’t access the id’s of the textbox created in the c# method to manipulate them. Kindly help with a solution.

            if col == 8
            {
                // re-arrange the rows
                for (int i = 0; i < dtSearch.Rows.Count; i++)
                {
                    strTR = strTR + "<tr >"
                        + "<td> " + " <span>" + (i + 1).ToString() + "</span> " + "</td>"
                        + "<td> " + dtSearch.Rows[i][0].ToString().Trim() + "</td>"
                        + "<td> " + dtSearch.Rows[i][1].ToString().Trim() + "</td>"
                        + "<td> " + dtSearch.Rows[i][2].ToString().Trim() + "</td>"
                        + "<td> " + dtSearch.Rows[i][3].ToString().Trim() + "</td>" 
                        + "<td> " + " <input name='txtaccomod' type='text' id='txtaccomod" + (i + 1).ToString().Trim() + "' class='txtaccomod'  style='width:100px;' /> " + "</td>"
                        + "<td> " + " <input name='txttranspot' type='text' id='txttranspot" + (i + 1).ToString().Trim() + "' class='txttranspot' style='width:100px;' /> " + "</td>"
                        + "<td> " + " <input name='txtfeeding' type='text' id='txtfeeding" + (i + 1).ToString().Trim() + "' class='txtfeeding' style='width:100px;' /> " + "</td>"
                        + "<td> " + " <input name='txtothercst' type='text' id='txtothercst" + (i + 1).ToString().Trim() + "' class='txtothercst' style='width:100px;' /> " + "</td>"
                        + "<td> " + " <input name='txttotcst' type='text' id='txttotcst" + (i + 1).ToString().Trim() + "' class='txttotcst' style='width:100px;' /> " + "</td>"
                        + "</tr>";

 

You are viewing reply posted by: pandeyism one month ago.
Posted one month ago

Hey RumeValid,

Please refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('input[type=text]').on('keyup', function () {
            var trs = $(this).closest('tr');
            var tds = trs.find('td');
            var acco = $(tds).find('[id*=txtaccomod]').val() != "" ? $(tds).find('[id*=txtaccomod]').val() : "0";
            var trans = $(tds).find('[id*=txttranspot]').val() != "" ? $(tds).find('[id*=txttranspot]').val() : "0";
            var feeding = $(tds).find('[id*=txtfeeding]').val() != "" ? $(tds).find('[id*=txtfeeding]').val() : "0";
            var ot = $(tds).find('[id*=txtothercst]').val() != "" ? $(tds).find('[id*=txtothercst]').val() : "0";
            $(tds).find('[id*=txttotcst]').val(parseInt(acco) + parseInt(trans) + parseInt(feeding) + parseInt(ot));
        });
    });
</script>
<div>
    <asp:Label ID="lblText" runat="server" />
</div>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{

    string strTR = "<table>";
    for (int i = 0; i < 5; i++)
    {
        strTR = strTR + "<tr>"
            + "<td> " + " <span>" + (i + 1).ToString() + "</span> " + "</td>"
            + "<td> " + " <input name='txtaccomod' type='text' id='txtaccomod" + (i + 1).ToString().Trim() + "' class='txtaccomod'  style='width:100px;' /> " + "</td>"
            + "<td> " + " <input name='txttranspot' type='text' id='txttranspot" + (i + 1).ToString().Trim() + "' class='txttranspot' style='width:100px;' /> " + "</td>"
            + "<td> " + " <input name='txtfeeding' type='text' id='txtfeeding" + (i + 1).ToString().Trim() + "' class='txtfeeding' style='width:100px;' /> " + "</td>"
            + "<td> " + " <input name='txtothercst' type='text' id='txtothercst" + (i + 1).ToString().Trim() + "' class='txtothercst' style='width:100px;' /> " + "</td>"
            + "<td> " + " <input name='txttotcst' type='text' id='txttotcst" + (i + 1).ToString().Trim() + "' class='txttotcst' style='width:100px;' /> " + "</td>"
            + "</tr>";
    }
    lblText.Text = strTR + "</table>";
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim strTR As String = "<table>"
    For i As Integer = 0 To 5 - 1
        strTR = strTR & "<tr>" & "<td> " & " <span>" & (i + 1).ToString() & "</span> " & "</td>" & "<td> " & " <input name='txtaccomod' type='text' id='txtaccomod" & (i + 1).ToString().Trim() & "' class='txtaccomod'  style='width:100px;' /> " & "</td>" & "<td> " & " <input name='txttranspot' type='text' id='txttranspot" & (i + 1).ToString().Trim() & "' class='txttranspot' style='width:100px;' /> " & "</td>" & "<td> " & " <input name='txtfeeding' type='text' id='txtfeeding" & (i + 1).ToString().Trim() & "' class='txtfeeding' style='width:100px;' /> " & "</td>" & "<td> " & " <input name='txtothercst' type='text' id='txtothercst" & (i + 1).ToString().Trim() & "' class='txtothercst' style='width:100px;' /> " & "</td>" & "<td> " & " <input name='txttotcst' type='text' id='txttotcst" & (i + 1).ToString().Trim() & "' class='txttotcst' style='width:100px;' /> " & "</td>" & "</tr>"
    Next
    lblText.Text = strTR & "</table>"
End Sub

Screenshot