Iterate through a table and get the value in asp.net core using jquery

34
September 19, 2019, at 04:11 AM

I am trying to iterate through a table to get the input value. How can I do that ?

tried looping and iterating over the tr and class names. console.log showing nothing for the moment.

CSHTML

<tbody>
    @foreach (var item in Model)
    {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.PositionDebit)
        </td>
        <td class="Debit">
            <span>@item.Debits</span>
            <input class="Debits" type="number" value="@item.Debits" />
        </td>
        <td class="CoefPonderation">
            <span>@item.CoefficientDePonderation</span>
            <input class="CoefPonderation" type="number" value="@item.CoefficientDePonderation" />
        </td>
        <td class="Jauge">
            <span>@item.Jauge</span>
            <input class="Jauge" type="number" value="@item.Jauge" />
        </td>
    </tr>
    }
</tbody>

Javascript The id of the table is tblDebit

  $("#tblDebit tr").each(function () {
        var debit = {};
        debit.Debits = $(this).find(".Debits").html();
        debit.CoefPonderation = $(this).find(".CoefPonderation").html();
        debit.Jauge = $(this).find(".Jauge").html();
        console.log(debit.Debits);
        console.log(debit.CoefPonderation);
        alert(debit.CoefPonderation);
        debits.push(debit);
    });
Answer 1

Hi you have some issues here:

  1. First use .val() instead of .html().
  2. you should use the class CoefPonderation in your td or input not both.
  3. in your loop get each element and dont use this.

here is the javascript code:

$("#tblDebit").find("tbody").children("tr").each(function(index, element) { 
  let debits = [], 
    debit = {}; 
  debit.Debits = $(element).find(".Debits").val(); 
  debit.CoefPonderation = $(element).find(".CoefPonderation").children('input[type="number"]').val(); 
  debit.Jauge = $(element).find(".Jauge").val(); 
//  console.log(debit.Debits); 
//  console.log(debit.CoefPonderation); 
  console.log('row:' + $.trim($(element).find("td").first().text()) + ', debit:' + debit.Debits + ', ponderation:' + debit.CoefPonderation); 
  debits.push(debit); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<table id="tblDebit" border="1"> 
  <thead> 
    <th>row</th> 
    <th>Debits</th> 
    <th>Ponderation</th> 
    <th>Jauge</th> 
  </thead> 
  <tbody> 
    <tr> 
      <td> 
        1 
      </td> 
      <td class="Debit"> 
        <span>item 1</span> 
        <input class="Debits" type="number" value="1" /> 
      </td> 
      <td class="CoefPonderation"> 
        <span>ponderation 1</span> 
        <input class="CoefPonderation" type="number" value="1" /> 
      </td> 
      <td class="Jauge"> 
        <span>Jauge 1</span> 
        <input class="Jauge" type="number" value="1" /> 
      </td> 
    </tr> 
    <tr> 
 
      <td> 
        2 
      </td> 
      <td class="Debit"> 
        <span>item 2</span> 
        <input class="Debits" type="number" value="2" /> 
      </td> 
      <td class="CoefPonderation"> 
        <span>ponderation 2</span> 
        <input class="CoefPonderation" type="number" value="2" /> 
      </td> 
      <td class="Jauge"> 
        <span>Jauge 2</span> 
        <input class="Jauge" type="number" value="2" /> 
      </td> 
 
    </tr> 
  </tbody> 
</table>

Hope it helps

Answer 2

Instead of html() use val()

    debit.Debits = $(this).find(".Debits").val();
    debit.CoefPonderation = $(this).find(".CoefPonderation").val();
    debit.Jauge = $(this).find(".Jauge").val();
READ ALSO
Codeigniter input library not recognising ajax post data

Codeigniter input library not recognising ajax post data

I am trying to build a file manager with CodeIgniter and bootstrap modal (as my popup for the file manager on a button click) where I list folders and files from a directoryAlthough the first load of the modal loaded the subfolders and files of the specific...

15
JQuery EasyAutoComplete autopopulates fields but Values not being Submitted with Form

JQuery EasyAutoComplete autopopulates fields but Values not being Submitted with Form

I've successfully implemented EasyAutoComplete with an address form

23
Drop element centered on mouse position

Drop element centered on mouse position

I have a container where I want to drop an image from a menu below but when I drop it at the main container I cannot get the proper position, it seems it is dropped randomly in the containerHow can I get the item dropped centered at mouse position?

10
How to write a column template to display and checked the checkbox conditionally where Columns are generating dynamically

How to write a column template to display and checked the checkbox conditionally where Columns are generating dynamically

I have a requirement to generate the number of columns dynamically while loading the screen based on the value that comes from databaseI could create the Kendo grid columns based on the input

34