locked
How to insert a couple of rows to a table from ajax partial view return? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1651604128 posted

    in my mvc razor view, I have a html table, the last some rows in the table contain dropdown list with viewbag data binded, such as City, Country,

    the first row is radio button, when I click the radio button, based on the selected button, these rows with City and Country needs to changed with the viewbag data,

    so I use ajax call when the radio button is changing to insert their associated partial view which are a few table rows,

    Normally, we use div with id to insert ajax result, but in this case, I can not insert div with a table, how to define a id with a table to insert some rows?

    Tuesday, July 16, 2019 1:50 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    Peter Cong

    Normally, we use div with id to insert ajax result, but in this case, I can not insert div with a table, how to define a id with a table to insert some rows?

    I'm not sure what Id you are referring to. The following selector and code sample inserts rows at the end of the table.

    <div>
    <table id="MAMaintable" border="1">
        <thead>
            <tr>
                <th>colum 1</th>
                <th>column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Hello</td>
                <td>World</td>
            </tr>
            <tr>
                <td>Foo</td>
                <td>Bar</td>
            </tr>
        </tbody>
    </table>
</div>
<div>
    <input id="Button1" type="button" value="Add Row" />
</div>



@section scripts {
    <script>
        $('#Button1').click(function () {
            var newRow = '<tr><td>New</td><td>Row</td></tr>';

            $('#MAMaintable tr:last').after(newRow);
        });

    </script>
}

    jQuery reference documentation.

    https://api.jquery.com/category/selectors/

    https://api.jquery.com/after/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 16, 2019 2:18 PM