How do I get the id value from a HTML table using javascript and MVC

Question

1.00/5 (1 vote)

See more:

Hello,

I am facing a problem and I searching a lot of possible solutions, but no luck. So I hope to get help here. My case is showing some properties in an HTML table on the selected category. After the table(ID,Title,value) is shown, I have to take the properties from the table and send it to the controller. The problem is when looping inside the table the id gives me undefined. Any another suggestions to get the id?

What I have tried:

Here is my code:

JavaScript

AjaxCall('/Home/GetCategoryProperty', obj, 'POST').done(function (response) {

               if (response.length > 0) {

                   var DeviceVM = { "AvailableCatProperty": response }
                   console.log(DeviceVM);

                   $('#AvailableCatProperty').val(DeviceVM);

                   $('#catprop').html('');

                   table += '<table class="table table-bordered table-striped"
                   id=_catprop>';
                   table += '<thead class="thead-dark">';
                   table += '<tr><th>Property</th><th>Value</th></tr>';
                   table += '</thead>';
                   table += '<tbody>';

                   for (var i = 0; i < response.length; i++) {
                       table += '<tr data-id='+ response[i].id +'>';
                       table += '<td>' + response[i].title + '</td>';
                       table += '<td><input type="text" asp-for="' + response[i].value + '"/></td>';
                       table += '</tr>';
                   }
                   table += '</tbody></table>';
                   $('#catprop').append(table);

               }
               else {
                   $('#catprop').empty();
                   table = '<p> No Property For Selected Category !! </p>';
                   $('#catprop').append(table);
               }

To get the table data:

JavaScript

var table = document.getElementById("_catprop").rows;
for (let row of table) {
                for (let cell of row.cells) {
                    alert(cell.innerText + $("#id").val());
                }
            }

Posted 1-Feb-22 6:02am

Ramy82

Updated 2-Feb-22 3:55am

Sean Ewington

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

M Imran Ansari · Accepted Answer · 2022-02-01T06:37:00

Solution 1

Try the following code to get the table data:

var table = document.getElementById('_catprop');
for (i = 0; i < table.rows.length; i++){
   var tableCells = table.rows.item(i).cells;
   for(var j = 0; j < tableCells.length; j++){
		  var cellVal = tableCells.item(j).innerHTML; // Write your logic 
		  alert(cellVal);
	   }
}

Posted 1-Feb-22 6:37am

M Imran Ansari

Comments

Ramy82 1-Feb-22 13:03pm

firstly thanks for your try , but it did not show the id's . want to tell you that the id is in the not like the title or the value .. hope to find the solution

M Imran Ansari 1-Feb-22 13:48pm

I have created a fiddle to demonstrate how to get table ID data. Check the link:
https://jsfiddle.net/fqu059aL/

Ramy82 2-Feb-22 8:10am

great if the id is a hidden . I wrote it like this
https://jsfiddle.net/15wp68fo/6/

M Imran Ansari 2-Feb-22 8:46am

With hidden ID column also working as expected.
https://jsfiddle.net/ktbzmpwq/