从文本框动态复制内容 [英] Dynamic Copy Contents from Textboxes
本文介绍了从文本框动态复制内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的完整代码。在添加按钮上生成动态行，并在删除图标图像上删除。我想复制2列的内容。
这是我的完整代码。在添加按钮上生成动态行，并在删除图标图像上删除。我想复制2栏的内容。
JavaScript代码：
< script type =text / javascript>
var cc = 1;
函数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' < 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'/> gt ;< / td>< td class ='Arial_4C8966'&g t;< 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;边框：0像素; （）;'（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）;
}
}）;
}
函数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代码：
< div class =row clearfix>
< div class =col-md-12 column>
< table class =table table-bordered table-hoverid =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 =buttonvalue =Addclass =frmBtnsonclick =addTableRow（$（'＃dynamicInput'））;
onblur =copy_data（this）; style =font-family：Calibri; font-size：15px;>
< br>
< / div>
解决方案
请看看修改后的HTML和JS代码。希望它能为你工作：
var cc = 1; CalculateGrandTotal（）;};}
函数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 ='宽度：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;边框：0像素; （）; $（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（）;} //计算总计函数CalculateGrandTotal（）{var grandTotal = 0; $（。Total） .each（function（）{var currVal = $（this）.val（）; if（！isNaN（currVal））{grandTotal + = parseFloat（currVal）;}}）; $（＃grand_total）。val如果（objReceiptNo.value！=''）{if（document.getElement（））;}函数setDeletedID（itemID）{objReceiptNo = document.getElementById（'ReceiptNo _'+ itemID） ById（'txtDeletedIDs'）。value ==''）{document.getElementById（'txtDeletedIDs'）。value = objReceiptNo.value; } else {document.getElementById（'txtDeletedIDs'）。value + ='，'+ objReceiptNo.value; }}}
table，th，td {border：1px纯黑色; 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-hoverid =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> < /表> < / div>< / div>< div class =col-sm-6> < input type =buttonvalue =Addclass =frmBtnsonclick =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_totaltype =textclass =form-controlid =grand_totalsize =10/>< / div> code>
请尽量使用上述JS和HTML代码。用上面的代码替换你的相应代码。请注意：您的函数setDeletedID 不能像提供的那样工作HTML不包含任何带有 id <$的元素C $ C> txtDeletedIDs 。请再次检查。谢谢。
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>
解决方案
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.
这篇关于从文本框动态复制内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
