JQuery append row to table tbody

Introduction

This blog JQuery append row to table tbody, provides the code snippet for adding a new row into an HTML table dynamically at runtime using JQuery. this code snippet adding a new row into the existing HTML table by cloning an existing row using JQuery.

Getting Started

Here in this code, as I explained in the introduction section clones the last row of the HTML table and later changes the value of the name property of all the child elements what this row contains. Again added this cloned row into the table
See the bellow code for details.

The below code follows this points.

  1. Creates an object of the table using id
  2. Creates an object of the last row of the table, It finds the last row using below code.
      var $trdocLast = $tabledockBody.find("tr:last");  
    
  3. Then closes the last row to a new row object.
  4. Makes required changes to the new row and again append it to the table.
 $("#addNewDealer").click(function (e) {  
 e.preventDefault();  
 var $tabledockBody = $("#dealerdocs");  
 var $trdocLast = $tabledockBody.find("tr:last");  
 var $trNewdoc = $trdocLast.clone();  
 var suffix = $trNewdoc.find(':input:first').attr('name').match(/\d+/);  
 $trNewdoc.find('td:nth-child(3)').html('<input data-val="true" data-val-required="The ProofDoc field is required." name=[' + (parseInt(suffix) + 1) + '].ProofDoc type=file value>');  
 $trNewdoc.find('td:last').html('<a href="#" id=doc_' + (parseInt(suffix) + 1) + ' onclick="removeDocRow(doc_' + (parseInt(suffix) + 1) + ')" class="fa fa-times remove-list" data-toggle="tooltip" title="Remove"></a>');  
 $.each($trNewdoc.find(':input,select'), function (j, val) {  
 var olddN = $(this).attr('name');  
 var newdN = olddN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');  
 $(this).attr('name', newdN);  
 var olddid = $(this).attr('id');  
 if (olddid != undefined) {  
 var newid = olddid.replace(suffix + '_', (parseInt(suffix) + 1) + '_');  
 $(this).attr('id', newid);  
 }  
 var onc = $(this).attr('onchange');  
 if (onc != undefined) {  
 var nnc = onc.replace('documenttypechanged(' + suffix + ',this.value)', 'documenttypechanged(' + (parseInt(suffix) + 1) + ',this.value)')  
 $(this).attr('onchange', nnc);  
 }  
 try {  
 var type = $(this).attr('type');  
 if (type == 'text') {  
 $(this).val('');  
 }  
 if (type == 'hidden') {  
 $(this).val('0');  
 }  
 }  
 catch (err) {  
 alert(err);  
 }  
 $(this).removeClass("input-validation-error");  
 });  
 $trdocLast.after($trNewdoc);  
 try {  
 var from = $('form').removeData("validator");  
 form.removeData("unobtrusiveValidation");  
 }  
 catch (err) {  
 }  
 $("form").removeData("validator");  
 $("form").removeData("unobtrusiveValidation");  
 $.validator.unobtrusive.parse("form");  
 });  

JQuery append row to table tbody

Summary

Here in the above JQuery append row to table tbody, we say how to add a new row into HTML table dynamically at runtime. I hope you have enjoyed it a lot.

Thanks

Kailash Chandra Behera

An IT Professional with 12 years experience in development life cycle in windows, service and Web based application using Microsoft.Net technologies. Proven record of developing all phases of projects in Microsoft.Net technology from initiation to closure aligning with the company's Business objectives to drive process improvements, competitive advantage and bottom-line gains. -> Good exposure of independently working and developing multiple projects ->Committed to efficient and effective development of projects in a fast-paced and deadline driver environment. Skill :- Develop and design projects in various technologies of Microsoft Technology. Total IT Experience- 13+

Previous Post Next Post

نموذج الاتصال