Click here to Skip to main content
15,888,142 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
only first row insert not every.

What I have tried:

HTML
@model MVCDemo.DAL.tbl_user

@{
    Layout = null;
    <script src="~/Scripts/jquery-3.1.0.min.js"></script>
}
<table id="dynamicTable1">
    <thead>
    <th>Id</th>
    <th>Name</th>
    <th>Password</th>
    <th>Conform Password</th>
    <th>Full Name</th>
    <th>Email</th>
    </thead>
    <tr id="0">
        <td><input type="text" id="txtuserid" /></td>
        <td><input type="text" id="txtuname" /></td>
        <td><input type="text" id="txtpass" /></td>
        <td><input type="text" id="txtcpass" /></td>
        <td><input type="text" id="txtfullname" /></td>
        <td><input type="text" id="txtemail" /></td>      
        <td><button class="remove">Remove</button></td>
    </tr>
</table>

<input type="button" id="addrow" value="Add New Row" />
<input type="button" onclick="insert();" value="Create" class="btn btn-default" />


<table class="samplerow" style="display:none">
    <tr id="fullrow">
        <td><input type="text" id="txtuserid" /></td>
        <td><input type="text" id="txtuname" /></td>
        <td><input type="text" id="txtpass" /></td>
        <td><input type="text" id="txtcpass" /></td>
        <td><input type="text" id="txtfullname" /></td>
        <td><input type="text" id="txtemail" /></td>      
        <td><button class="remove">Remove</button></td>
    </tr>
</table>

<script>
    jQuery(document).ready(function () {
        var id = 0;
        jQuery("#addrow").click(function () {
            id++;
            var row = jQuery('.samplerow tr').clone(true);
          
            row.appendTo('#dynamicTable1');
            return false;
        });

        $('.remove').on("click", function () {
            $(this).parents("tr").remove();
        });
    });



    var insert = function () {
        
        $("#fullrow").each(function () {
            $.ajax({
                url: '/bulkadd/Index',
                type: "POST",
                data: {
                 
                        UserID: $("#txtuserid").text(),
                        Username: $("#txtuname").val(),
                        Password: $("#txtpass").val(),
                        ConfirmPassword: $("#txtcpass").val(),
                        FullName: $("#txtfullname").val(),
                        EmailID: $("#txtemail").val(),
                    
                   },
                success: function (data) {
                    //  getalllist();
                },
                error: function (data) {
                    alert("Error in creating new User");
                }
            });

        });
    }
</script>
Posted
v2
Comments
Not clear. Please explain the issue.

1 solution

This is because you have invalid html, your each tr should have a unique id, so you need to use class, as when jquery will resolve the selector you applied it is just able to find the first row, so change in html to add it as class:

HTML
<table class="samplerow" style="display:none">
    <tbody><tr class="fullrow">
        <td><input type="text" id="txtuserid" /></td>
        <td><input type="text" id="txtuname" /></td>
        <td><input type="text" id="txtpass" /></td>
        <td><input type="text" id="txtcpass" /></td>
        <td><input type="text" id="txtfullname" /></td>
        <td><input type="text" id="txtemail" /></td>      
        <td><button class="remove">Remove</button></td>
    </tr>
</tbody></table>



and now in jquery apply class selector:

JavaScript
$(".fullrow").each(function () {

    // your code here
 });
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900