How to change Id of cloned row in below jQuery code

Question

I'm trying to achieve the change of Id But the code what I have is only having the code to change the name of the element can anyone please help to change the id of the element in the below give jquery code

Thanks in Advance. Html View-source code is as follows


        
            + -
            
                
                    
                        UserName
                        Password
                        Service line
                        Track
                        subtrack

Jquery is as follows

    $(document).ready(function () {
        //1. Add new row
        $("#addNew").click(function (e) {
            e.preventDefault();
            var $tableBody = $("#dataTable");
            var $trLast = $tableBody.find("tr:last");
            var $trNew = $trLast.clone(true);
            var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
            $.each($trNew.find(':input'), function (i, val) {
                // Replaced Name
                var oldN = $(this).attr('name');
                var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                $(this).attr('name', newN);
                // If you have another Type then replace with default value
                $(this).removeClass("input-validation-error");
            });
            $trLast.after($trNew);
        });
    });

I have tried by changing the attr(name) to attr(id) after changing like that its not changing the name but even not changing the ids too...

For more reference the Html code is as follows::

 
            @if (Model != null && Model.Count > 0)
             {
                int j = 0;
                foreach (var i in Model)
                {
                    
                    j++;
                }
             }
        
        
            
                UserName
                Password
                Service line
                Track
                subtrack
                
            
        
        
                        @Html.TextBoxFor(a => a[j].UserName)
                        @Html.TextBoxFor(a => a[j].Password)
                        
                            @if (ViewBag.ServiceLineList != null)
                            {
                                @Html.DropDownListFor(a => a[j].Service_Line, ViewBag.ServiceLineList as SelectList, "--Select--", new {  @class = "wrapper-dropdown Service_Line" })
                            }
                        
                        
                            @Html.DropDownListFor(a => a[j].Track, new SelectList(" "), "--Select--", new {  @class = "wrapper-dropdown Track" })
                        
                        
                            @Html.DropDownListFor(a => a[j].Sub_Track, new SelectList(" "), "--Select--", new { @class = "wrapper-dropdown Sub_Track" })
                        

                        
                            @if (j > 0)
                            {
                                Remove
                            }

FluffyKitten · Accepted Answer

To create a unique id, we can keep a count of the rows added in the jQuery, and append this to the base name (e.g. UserName) to create a unique name and id. You say there will only be one row in the HTML, so we can start the count for our new rows at 1.

Every time the "Add New" button is clicked, the steps are (numbers match the comment numbers):

Initialise our variable to start the count
generate a unique id for the row, e.g. TemplateRow-1: var newId = "TemplateRow-" + rowcount;
Clone the row and pass in the id: $trLast.clone(true).prop({ id: newId});
generate the name and id for each input: get the input name, remove the [n] to get the base name (e.g. UserName), and use this to create the new name (e.g. [1].UserName) and id (e.g. z1__UserName).

Working snippet: I show the new id using console.log so you can see what is being added:

$(document).ready(function() {
  /* 1. Initialise our variable to keep count of the rows added */
  var rowcount = 1;

  //Add new row
  $("#addNew").click(function(e) {
    e.preventDefault();
    var $tableBody = $("#dataTable");
    var $trLast = $tableBody.find("tr:last");

    // 2. Create the new id with the row count
    var newId = "TemplateRow-" + rowcount;

    // 3. clone the row with our new id
    var $trNew = $trLast.clone(true).prop({ id: newId });

    // 4. rename each input and give an id
    $.each($trNew.find(':input'), function(i, val) {

      oldName = $(this).attr('name');
      inputParts = oldName.split(".");

      // set the  name and id with the base name and rowcount
      $(this).attr('name', '[' + rowcount + '].'+inputParts[1]);
      $(this).attr('id', 'z'+rowcount+'__'+inputParts[1]);

      $(this).removeClass("input-validation-error");
    });
    
    $trLast.after($trNew);

    rowcount++;
  });
});




  
    
            UserName
            Password
            Service line
            Track
            subtrack

How to change Id of cloned row in below jQuery code

Answers (1)

Related Questions