I have a table in my view for what is essentially my attempt at making a timesheet table. It also contains a button for adding more rows to the table.

```
<table class="table table-bordered table-responsive table-hover" id="mytab" cellspacing="0" cellpadding="0">  
        <thead>
            <tr>  
                <th>Project</th>   
                <th>Discipline</th>  
                <th>Mo</th>  
                <th>Tu</th>  
                <th>We</th>  
                <th>Thu</th>  
                <th>Fri</th>  
                <th>Sat</th>  
                <th>Sun</th>  
                <th></th>
            </tr>  
        </thead>
        <tr>
            <td><select name="selectedProjectId" asp-items="@ViewData["projectSubProject"] as SelectList" class="form-control-plaintext align-content-around">
            </select></td>  
            <td><select name="selectedPositionId" asp-items="@ViewData["Positions"] as SelectList" class="form-control-plaintext align-content-around"></select></td>  
            <td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>  
            <td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>  
            <td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>  
            <td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>  
            <td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>  
            <td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>  
            <td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td> 
        </tr>
    </table> 
    <br />
    <form action="">
        <input type="button" value="Add a Row" onclick="addRow()">
    </form>

```

[It looks like this in the web page](https://i.stack.imgur.com/JMhzI.png)

The script for adding rows to the table and the script for what **should**, from what i gather, send the table data in json format to controller on table data change look like this:

```
$(document).ready(function(){
        $("#myTable").on('input', '.txtCal', function () {
               var calculated_total_sum = 0;

               $("#myTable .txtCal").each(function () {
                   var get_textbox_value = $(this).val();
                   if ($.isNumeric(get_textbox_value)) {
                      calculated_total_sum += parseFloat(get_textbox_value);
                      }                  
                    });
                      $("#total_sum_value").html(calculated_total_sum);
               });

        });

        function addRow() {
            var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
            var rows = root.getElementsByTagName('tr');
            var clone = cloneEl(rows[rows.length - 1]);
            cleanUpInputs(clone);
            root.appendChild(clone);
        }

        function cloneEl(el) {
            var clo = el.cloneNode(true);
            return clo;
        }

        function cleanUpInputs(obj) {
          for (var i = 0; n = obj.childNodes[i]; ++i) {
            if (n.childNodes && n.tagName != 'INPUT') {
              cleanUpInputs(n);
            } else if (n.tagName == 'INPUT' && n.type == 'number') {
              n.value = '';
            }
          }  
        }

        $('input').change(function () {
            var table = document.getElementById("mytab");
            var rows = table.getElementsByTagName("tr");
            var data = [];
            for (var i = 0; i < rows.length; i++) {
                var cells = rows[i].getElementsByClassName("form-control-plaintext");
                var row = [];
                for (var j = 0; j < cells.length; j++) {
                    var cell = cells[j];
                    row.push(cell.innerText);
                }
                data.push(row);
            }
            $.ajax({
                type: "POST",
                url: '@Url.Action("TableList", "Home")',
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert("success");
                },
                failure: function (data) {
                    alert("can not update the timesheet");
                }
            });
        });

```

And finally, my controller methods look like this:

```
public async Task<IActionResult> TableList()
    {
        var projectSubProject = await _context.SubProject.Include(x => x.Project).ToListAsync();
        ViewData["projectSubProject"] = new SelectList(projectSubProject, "Id", "DisplayId");
        ViewData["Positions"] = new SelectList(await _context.Position.ToListAsync(), "Id", "Title");

        return View();
    }

    [HttpPost]
    public async Task<IActionResult> TableList([FromBody] List<object> data)
    {
        return View();
    }

```

The problem that i think i'm encountering is that the JSON data doesn't actually reach the controller, since putting a break point anywhere on the Post method doesn't ever trigger it.

Am i doing something wrong? Am i missing some crucial step? Is there perhaps an easier way of doing what i want to do?

**UPDATE**

I've now managed to send my data to the controller. However, the data that does reach the controller isn't correct.
[![The data looks like this](https://i.stack.imgur.com/5aVnw.png)](https://i.stack.imgur.com/5aVnw.png)

As you can see, it gets all of the options of the select, instead of only my selected option. It also doesn't get any of the numbers through.

I've updated all of my code to reflect the current situation.