how to send a html table rows to controller action from jquery function

Question

i am new to mvc so please help

please see the fiddle https://jsfiddle.net/shaswatatripathy/9d0oknyt/2/

here i have a table and I have to write a jquery function which will get all the rows which have status as modified and send data to controller action and access this data to create datatable in controller action

the table is dynamic -many rows can come up there so need a jquery function which will be invoked on a button click and get rows details with status modified

html

    <table id="mytable">
<thead>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Gender</th>
    <th>status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>jhon</td>
    <td>us</td>
    <td>male</td>
    <td>static</td>
  </tr>
   <tr>
    <td>joana</td>
    <td>washington</td>
    <td>female</td>
    <td>static</td>
  </tr>
   <tr>
    <td>steve</td>
    <td>belgium</td>
    <td>male</td>
    <td>modified</td>
  </tr>
   <tr>
    <td>jimmy</td>
    <td>angola</td>
    <td>male</td>
    <td>modified</td>
  </tr>
    <tr>
    <td>lisa</td>
    <td>india</td>
    <td>female</td>
    <td>modified</td>
  </tr>
</tbody>
</table>

<br />
<input type="button" onclick="sendDetailsToControllerAction()" value="get details"/>

css

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

i can use jquery ajax method to send data to my controller action

server side

public actionResult GetDetails()
{


    return view();
}

how to get details of every row with status modified and send it controller .

table header names and column names in my data table which i will create in action will be different .

i dont need that much help creating datatable out of data , but dont know how to send that data and get it

Vishal Shori · Accepted Answer · 2017-04-28 06:57:35Z

1

Using below function you will be able to get "modified" rows and save those row in array and then you can use $.ajax to call your Action in controller

<script type="text/javascript">

        function sendDetailsToControllerAction() {
            var tableData = document.getElementById('mytable');
            var numberOfRows = tableData.rows.length;
            for (var i = 1; i < numberOfRows; i += 1) {
                var row = tableData.rows[i];
                if (row.cells[3].innerText == 'modified') {
                   //Rows which have modified status
                    console.log(row)
                }
            }
        }

    </script>

answered Apr 28, 2017 at 6:57

Vishal Shori

4044 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tripathy Over a year ago

I Can not get rows as this table is from a partial view so , its every time its rows is 0 . can you put some jquery code

tripathy Over a year ago

like find the table and put it in json and deserailize in controller action

Collectives™ on Stack Overflow

how to send a html table rows to controller action from jquery function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related