使用MVC和jquery批量添加行 [英] Bulk add row using MVC and jquery

问题描述

只有第一行不是每次都插入。



我尝试过：

only first row insert not every.

What I have tried:

@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>

推荐答案

（ 。remove'）。on（ 单击， function （）{

('.remove').on("click", function () {

（ this ）。parents（ tr）。remove（）;
}）;
}）;



var insert = function （） {

(this).parents("tr").remove(); }); }); var insert = function () {

（ ＃fullrow）。每个（< span class =code-keyword> function （）{

这篇关于使用MVC和jquery批量添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！