Calculate average with dynamic TextBoxes in Table using jQuery in ASP.Net MVC

nabilabolo
 
on Oct 13, 2021 02:25 AM
470 Views

Hi,

i have a table which have the empty textboxes that the amount of textboxes is from database.

I want to calculate the average of each textboxes.

Under YI column i need to calculate the average.

the code is as below

<table>
   <tr>
      <th>Tag No</th>
      <th>Tonnage</th>
      <th>Grade</th>
      <th>YI</th>
   </tr>
   @for (int d = 0; d < Model.tagnoList.Count; d++)
   {
       var words = @Model.descriptionList[a].tagnoList[b][d].tagno.Split(',');
       <tr class="spaceUnder">
       @for (int p = 0; p < words.Length - 1; p++)
       {
           if (p == 0 || p == 1 )
           {
                <td style="width:80px">@words[p].ToString()</td>
           }
           else if (p == (words.Length - 1))
           {
                <td style="width:80px"><input type="button" class="btn-primary" value="@words[p].ToString()" /></td>
           }
           else
           {
                if (@words[p].ToString() == "0")
                {
                     <td style="width:80px">
                         <div style="width:80px">
                              <input type="text" class="form-control" name="yiRead[]" />
                         </div>
                     </td>
                }
                else
                {
                    <td style="width:80px">
                         <div style="width:80px">
                               <input type="text" class="form-control" name="yiRead[]" value="@words[p].ToString()" /> //textboxes 
                         </div>
                    </td>
                }
            }
        }
        </tr>
	<tr>
            <td><input type="button" class="form-control btn btn-info" value="Average" style="width:40px" /></td>  //button to calculate average
	    <td></td>
	    <td></td>
            <td style="width:80px">
                 <div style="width:80px">
                      @Html.TextBoxFor(m => m.averageApp, new { @class = "form-control", @id = "result", @style = "height: 30px" }) // textbox to display average
		 </div>
            </td>
	</tr>
   }             
</table>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 21, 2021 12:04 AM

Hi nabilabolo,

Check the example.

Model

public class tagnoListModel
{
    public List<tagnoList> tagnoList { get; set; }
    public string averageApp { get; set; }
}

public class tagnoList
{
    public string TagNo { get; set; }
    public string Tonnage { get; set; }
    public string Grade { get; set; }
    public string YI { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<tagnoList> tagnoLists = new List<tagnoList>();
        tagnoLists.Add(new tagnoList { TagNo = "125797 - 125801", Tonnage = "5", Grade = "A" });
        tagnoLists.Add(new tagnoList { TagNo = "125802 - 125816", Tonnage = "20", Grade = "A" });
        tagnoLists.Add(new tagnoList { TagNo = "125817 - 125836", Tonnage = "40", Grade = "NG" });
        tagnoLists.Add(new tagnoList { TagNo = "125837 - 125856", Tonnage = "60", Grade = "A" });
        tagnoLists.Add(new tagnoList { TagNo = "125857 - 125876", Tonnage = "80", Grade = "A" });
        tagnoLists.Add(new tagnoList { TagNo = "125877 - 125896", Tonnage = "100", Grade = "A" });
        tagnoLists.Add(new tagnoList { TagNo = "125897 - 125916", Tonnage = "120", Grade = "A" });

        tagnoListModel model = new tagnoListModel();
        model.tagnoList = tagnoLists;
        return View(model);
    }
}

View

@model Average_Dynamic_TextBox.Models.tagnoListModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnAverage').on('click', function () {
                var total = 0;
                $('input[name*=yiRead]').each(function () {
                    total += isNaN($(this).val()) || $(this).val() == "" ? 0 : parseFloat($(this).val());
                });
                $('#result').val((total / $('input[name*=yiRead]').length).toFixed(2));
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <th>Tag No</th>
            <th>Tonnage</th>
            <th>Grade</th>
            <th>YI</th>
        </tr>
        @for (int d = 0; d < Model.tagnoList.Count; d++)
        {
            <tr class="spaceUnder">
                <td>@Model.tagnoList[d].TagNo.ToString()</td>
                <td>@Model.tagnoList[d].Tonnage.ToString()</td>
                <td><input type="text" value="@Model.tagnoList[d].Grade.ToString()" /></td>
                <td>
                    <div>
                        <input type="text" class="form-control" name="yiRead[]" />
                    </div>
                </td>
            </tr>
        }
        <tr>
            <td><input id="btnAverage" type="button" class="form-control btn btn-info" value="Average" /></td>
            <td></td>
            <td></td>
            <td>
                <div>
                    @Html.TextBoxFor(m => m.averageApp, new { @class = "form-control", @id = "result", @style = "height: 30px" })
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Screenshot