none
Dynamic Table with Auto increment serial number on button click event RRS feed

  • Question

  • I want to create dynamic table which has functionality of creating same row on button click event. also each row has column serial number which is disable and has auto increment value in it.

    my table is like..

    <table id="OperationalInstructions" style="border-spacing: 10px; border: thin black solid " class="dynatable">

    <thead>
    <tr>
    <th>Sr. No.</th>
    <th>Instruction</th>
    </tr>
    </thead>

    <tbody>
    <tr class="prototype">
    <td>
    <input type="text" id="OISrNo" size="10%" value="1" disabled="disabled"/>
    </td>
    <td>
    <input type="text" size="100%" id="OperationalInstructiontxt"/>
    </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
    <th>
       <button type="button" id="BtnOperationalInstruction" >Add Row</button>
    </th>
    </tr>
    </tfoot>

    </table>


    Sunday, April 23, 2017 6:55 AM

All replies

  • Try below code...
    $("button[id='BtnOperationalInstruction']").click(function(){
    
    var $tableBody = $("table[id='OperationalInstructions']").find("tbody"),
            $trLast = $tableBody.find("tr:last"),
            $trNew = $trLast.clone();
            $trNew.find("input[id='OperationalInstructiontxt']").val("");
            var newValue = 
            parseInt($trLast.find("input[id='OISrNo']").val())+1;
             $trNew.find("input[id='OISrNo']").val(newValue);
    		
        $trLast.after($trNew);
    
    });
    Note : Don't forget to add JQuery file reference...
    Sunday, April 23, 2017 11:39 AM
  • Hi,

    Please check below article for more details:

    http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/


    Thanks, Amit Kumar, LinkedIn Profile ** My Blog
    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Monday, April 24, 2017 11:05 AM
  • Hi Pranita,

    Add the following code into a content editor web part in web part page.

    <table id="OperationalInstructions" style="border-spacing: 10px; border: thin black solid " class="dynatable">
    
     <thead>
     <tr>
     <th>Sr. No.</th>
     <th>Instruction</th>
     </tr>
     </thead>
    
     <tbody>
     <tr class="prototype">
     <td>
     <input type="text" id="OISrNo" size="10%" value="1" disabled="disabled"/>
     </td>
     <td>
     <input type="text" size="100%" id="OperationalInstructiontxt"/>
     </td>
     </tr>
     </tbody>
    
     <tfoot>
     <tr>
     <th>
        <button type="button" id="BtnOperationalInstruction" >Add Row</button>
     </th>
     </tr>
     </tfoot>
    
     </table>
     
     <style>
     .ms-rtestate-field table, .ms-rtestate-write table{
    	border-collapse:separate !important;
     }
     </style>
    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {   
    	$("#BtnOperationalInstruction").click(function(){
    		var $tableBody = $("#OperationalInstructions").find("tbody"),
    		$trLast = $tableBody.find("tr:last"),
    		$trNew = $trLast.clone();
    		$trNew.find("#OperationalInstructiontxt").val("");
    		var newValue = parseInt($trLast.find("#OISrNo").val())+1;
    		$trNew.find("#OISrNo").val(newValue);			
    		$trLast.after($trNew);
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, April 25, 2017 8:37 AM
    Moderator