Dynamically add rows using jquery or javascript with contents from Model on client side

Question

I have the following code snipped from my cshtml file

<div id="trows" class="table-responsive">
        <table class="table table-bordered" id="myTable">
</div>

and inside the on add button event to add a row I tried as the following: -

        var itemRSelected = $("#SelectedteRId option:selected").text();
        var itemNSelected = $("#SelectedName option:selected").text();

        debugger;
        //all ok till above. I verified in debuggger
        //but I am not able to add these values along with the Model rows to the table using below code. Any help? clue to fix the issue?
        @{var i = 0;}
        @foreach (MyNameSpace.Models.MyClassObj p in Model.myClassList)
        {
           if(itemRSelected == p.RowId && itemNSelected == p.NamePix) {
                          var row = "<tr><td>" + @(p.RowId) + "</td><td>" + @(p.NamePix) +
                "</td><td>" + @(p.Mi) + "</td><td>" + @(p.Name) +
                "</td><td>" + @(p.ExtraDate) +
                "</td><td><a class='btn btn-danger btn-xs btnDelete' title='Delete'><i class='fa fa-trash-o'></i></a></td><tr>" ; }

                @: <text>@row</text>
                @:$("#myTable").eq(@i++).after(@row);

           }

You __can't__ use __Client Side__ JavaScript variable `itemNSelected` when rendering logic on __Server Side__ code i.e. `if(itemRSelected == p.RowId && itemNSelected == p.NamePix)`. Why can't achieve it using jQuery Ajax? — Satpal, Oct 05 '15 at 06:53
Suggest you look at the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for dynamically adding collection objects to a view — , Oct 05 '15 at 06:55
@Satpal, I am trying to avoid server trip as I expect I can have all model data over client side in first view trip itself. — AKS, Oct 05 '15 at 07:07
Stephen, thanks for suggestion, but i have logic ready that is similar to the links you provided. but still it is not working. I am not asking from scratch how to do it, but i have written something and wondering what is the error. if the experts looks they may immediately can catch the error and suggest the correct syntax/logic. Like @Satpal suggest above but I am trying to call another ajax call for what I assume is with client side over first trip with view. — AKS, Oct 05 '15 at 07:11
You logic is not even remotely close to the links I gave you. I suggest you study them again — , Oct 06 '15 at 05:20
@Stephen, Thanks and I hope you seen that the issue is resolved from another user reply. That user is smart enough to capture the problem I am facing from my logic and also suggested steps to proceed that ultimately resolved the problem and issue I am facing in my logic. — AKS, Oct 06 '15 at 06:44
That answer is creating duplicate name attributes (without indexers) which cannot bind to you model in the POST method. — , Oct 06 '15 at 06:45

score 0 · Accepted Answer · answered Oct 05 '15 at 08:51

To use the functions, you need to create an HTML table and give it a unique ID. The sample code uses tblGrid as the ID, but you can use any other name - just make sure to modify the function to use the new name. Next, you would need to modify the addRow function to ensure that the correct number of cells are added and their innerHTML is set properly.

 //add a new row to the table
function addRow()
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("tblGrid").insertRow();

    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'>&nbsp;&nbsp;<input" + 
                      " type='button' value='Delete' onclick='removeRow(this);'/>";   
}

//deletes the specified row from the table
function removeRow(src)
{
    /* src refers to the input button that was clicked. 
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case <tr>)
    */   
    var oRow = src.parentElement.parentElement;  

    //once the row reference is obtained, delete it passing in its rowIndex   
    document.all("tblGrid").deleteRow(oRow.rowIndex);  

}

and can refer to this link Dynamically add and remove rows in an HTML table

@Mohamed, thanks it worked for table, though i need to call ajax to get back rows to add in tables. But your answer help me to close the issue and hence accepting yours as a answer. Thanks. — AKS, Oct 05 '15 at 09:51

Dynamically add rows using jquery or javascript with contents from Model on client side

1 Answers1