Dynamic Copy Contents from Textboxes

Question

This is my full code. Dynamic rows are generating on add button and deleting on delete icon image. i want to copy the contents of 2 columns from it. This is my full code. Dynamic rows are generating on add button and deleting on delete icon image. i want to copy the contents of 2 columns from it.

JavaScript Code:

<script type="text/javascript">
     var cc = 1;

    function addTableRow(jQtable){
        var id=cc;
        jQtable.each(function() {
            var data = "<tr><td class='Arial_4C8966' align='center'><input name='InvoiceDate[]' type='date' class='form-control'  placeholder='' style='width:160px'  id='InvoiceDate_" + cc + "' size='10'  onclick='showData(this.value," + cc + ")'/></td><td class='Arial_4C8966'><input name='Details[]' type='text'  class='form-control' style='width:240px'  id='Details_" + cc + "' size='10'/></td><td class='Arial_4C8966'><input name='ReceiptNo[]' type='text'  class='form-control' style='width:180px' id='ReceiptNo_" + cc + "' size='10' /></td><td class='Arial_4C8966'><input name='Amount[]' class='form-control'  style='width:180px' type='text'   onblur='copy_data(this);' id='Amount_" + cc + "' size='10'   /></td><td class='Arial_4C8966'><input name='Total[]' style='width:180px'  class='form-control'  type='text' id='Total_" + cc + "' size='10' /></td><td class='Arial_4C8966'><img src='assets/img/pictures.png' style='cursor:pointer; border:0px; width:16px;' onclick='setDeletedID("+ cc +");$(this).parent().parent().remove();' />
            var $table = $(this);
            var n = $('tr:last td', this).length;
            var tds = data; 
            cc++;
            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }
        });
    }

    function setDeletedID(itemID){
        objReceiptNo=document.getElementById('ReceiptNo_'+itemID)
        if(objReceiptNo.value!=''){
            if(document.getElementById('txtDeletedIDs').value==''){
               document.getElementById('txtDeletedIDs').value= objReceiptNo.value;
            }else{
               document.getElementById('txtDeletedIDs').value+= ', '+objReceiptNo.value;
            }
        }
    }
</script>

HTML CODE:

 <div class="row clearfix">
    <div class="col-md-12 column">
        <table class="table table-bordered table-hover" id="dynamicInput">
            <tr class="Form_Text_Label">
                <td align="center">INVOICE DATE*</td>
                <td align="center">DETAILS*</td>
                <td align="center">RECEIPT NO*</td>
                <td align="center">AMOUNT*</td>

                <td align="center">TOTAL*</td>
                <td align="center"></td>
            </tr>
        </table>
    </div>
</div>

<div class="col-sm-6">
    <input type="button" value="Add" class="frmBtns" onclick="addTableRow($('#dynamicInput'));"
        onblur="copy_data(this);" style="font-family: Calibri; font-size: 15px;">


    <br>
</div>

Answer 1

Please take a look at revised HTML and JS code. Hope it will work for you:

var cc = 1;

CalculateGrandTotal();


	function addTableRow(jQtable){
		var id=cc;
		jQtable.each(function() {
			var data = "<tr><td class='Arial_4C8966' align='center'><input name='InvoiceDate[]' type='date' class='form-control'  placeholder='' style='width:160px'  id='InvoiceDate_" + cc + "' size='10'  onclick='showData(this.value," + cc + ")'/></td><td class='Arial_4C8966'><input name='Details[]' type='text'  class='form-control' style='width:240px'  id='Details_" + cc + "' size='10'/></td><td class='Arial_4C8966'><input name='ReceiptNo[]' type='text'  class='form-control' style='width:180px' id='ReceiptNo_" + cc + "' size='10' /></td><td class='Arial_4C8966'><input name='Amount[]' class='form-control'  style='width:180px' type='text'   onblur='copy_data(this);' id='Amount_" + cc + "' size='10'   /></td><td class='Arial_4C8966'><input name='Total[]' style='width:180px'  class='form-control Total'  type='text' id='Total_" + cc + "' size='10' /></td><td class='Arial_4C8966'><img src='assets/img/pictures.png' style='cursor:pointer; border:0px; width:16px;' onclick='setDeletedID("+ cc +");$(this).parent().parent().remove();' />";
			var $table = $(this);
			var n = $('tr:last td', this).length;
			var tds = data; 
			cc++;
			if ($('tbody', this).length > 0) {
				$('tbody', this).append(tds);
			} else {
				$(this).append(tds);
			}
		});
	}
    function copy_data(obj){
	   var current = $(obj);
	   var currentTr = current.closest("tr");
	   var currentTotalElem = currentTr.find(".Total");
	   currentTotalElem.val(current.val());
      
       CalculateGrandTotal();
	}
	
//calculate the grand total
    function CalculateGrandTotal(){
      var grandTotal = 0;
      $(".Total").each(function(){
        var currVal = $(this).val();
        if(!isNaN(currVal))
        {
          grandTotal += parseFloat(currVal);
        }
      });
      
      $("#grand_total").val(grandTotal);
    }

	function setDeletedID(itemID){
		objReceiptNo=document.getElementById('ReceiptNo_'+itemID)
		if(objReceiptNo.value!=''){
			if(document.getElementById('txtDeletedIDs').value==''){
			   document.getElementById('txtDeletedIDs').value= objReceiptNo.value;
			}else{
			   document.getElementById('txtDeletedIDs').value+= ', '+objReceiptNo.value;
			}
		}
	}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 

<div class="row clearfix">
    <div class="col-md-12 column">
        <table class="table table-bordered table-hover" id="dynamicInput">
            <tr class="Form_Text_Label">
                <td align="center">INVOICE DATE*</td>
                <td align="center">DETAILS*</td>
                <td align="center">RECEIPT NO*</td>
                <td align="center">AMOUNT*</td>

                <td align="center">TOTAL*</td>
                <td align="center"></td>
            </tr>
        </table>
    </div>
</div>

<div class="col-sm-6">
    <input type="button" value="Add" class="frmBtns" onclick="addTableRow($('#dynamicInput'));"
        style="font-family: Calibri; font-size: 15px;"></input>


    <br>

<label class="col-sm-3 text-right ">Grand Total :</label> <div class="col-sm-3"> <td class="Arial_4C8966"><input name="grand_total" type="text" class="form-control" id="grand_total" size="10" />

</div>

Please try to use above JS and HTML code as it is. Replace your corresponding code with above one. Please note: your function setDeletedID doesn't work as provided HTML don't contain any element with an id txtDeletedIDs. Please check that again. Thanks.