Javascript 如何将一个div的所有文本框值复制到另一个div文本框
我想将特定Javascript 如何将一个div的所有文本框值复制到另一个div文本框,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想将特定div的文本框内容复制到另一个div中 我在一个包含所有产品的产品数组中循环，然后我在检查parentChildMapping以查看该产品是否有子产品 如果我们为min，max，typ输入值，然后添加一个子项，那么我希望复制我们为min，max，typ输入的所有值 .clsProductDetailsHldr.嗯 { 垫面：5px； 垫底：5px； 利润底部：4倍； } .输入者 { 边框：1px纯红； 背景色：仿古白色； } 一行 { 利润底部：4倍； } {{product}}
divdiv
.clsProductDetailsHldr.嗯
{
垫面：5px；
垫底：5px；
利润底部：4倍；
}
.输入者
{
边框：1px纯红；
背景色：仿古白色；
}
一行
{
利润底部：4倍；
}
{{product}}
{{key1}}
$（“.clsAddChild”）。单击（函数（）
{
var newChild=“”；
newChild+=''；
newChild+='newChild Child 1'；
newChild+=''；
newChild+=''；
newChild+='newChild Child 1 Child 1'；
newChild+='newChild Child 1 Child 2'；
newChild+='newChild Child 1 Child 3'；
newChild+='newChild Child 1 Child 4'；
newChild+='newChild Child 1 Child 5'；
newChild+=''；
$（this）.closest（“.parentChildWrapper”）.append（newChild）；
});
indexController.js
angular.module（'productspoc'）
.controller（'indexCtrl'，['$scope'，函数（$scope）{
$scope.productsObj={}；
$scope.products=产品；
$scope.parentChildMapping=parentChildMapping；
$scope.checkIfProductHasChildren=函数（产品）
{
返回$scope.parentChildMapping中的产品；
};
$scope.addChildToParent=函数（父级）
{
var PorDuductIndex=产品指数（母公司）；
产品.拼接（porductIndex+1,0，母材+1）；
$scope.parentChildMapping[parent+1]=parent+1；
$scope.productsObj[“”+parent+1]={“Min”：“Typ”：“Max”：“}；
log（$scope.productsObj）；
};
$scope.checkIfNewChild=函数（产品、密钥）
{
if（（product.indexOf（“1”）==2 | product.indexOf（“1”）==3 | product.indexOf（“1”）==4））
返回true；
其他的
返回false；
};
$scope.removeChildFromParent=函数（产品，密钥）
{
删除$scope.productsObj[“”+产品]；
var PorDuductIndex=产品。indexOf（产品）；
产品.拼接（porductIndex，1）；
};
$scope.onClearClick=函数（）
{
var r=confirm（“您确定要重新加载页面。如果是，请单击OK，否则取消并继续您的工作。”）；
如果（r==true）{
window.location.reload（）；
angular.element（“.clsProductDetailsHldr input[type='text']”）val（“”）；
}
否则{
}
};
$scope.validateEnumberFields=函数（）
{
var isValid=true；
angular.forEach（angular.element（“.clsProductDetailsHldr.OnlyNumber”），函数（值，索引）{
if（isNaN（angular.element（value.val（）））
{
isValid=false；
角度.element（value）.addClass（“inputError”）；
}
});
返回有效；
};
$scope.onInputFocus=函数（事件）
{
元素（event.currentTarget）.removeClass（“inputError”）；
};
$scope.onSaveClick=函数（）
{
var isValid=$scope.validateEnumberFields（）；
如果（！isValid）
{
警报（“所选输入字段的编号无效”）；
回来
}
angular.forEach（$scope.productsObj，函数（值，键）{
if（对象的值实例&&value.hasOwnProperty（'newChildCount'））
删除value.newChildCount；
if（对象的值实例）
{
角度.forEach（值，函数）（值1，键1）
{
//下面的代码将进行检查
//键1不应该是注释，而值1应该有一些值
如果（键1！=='Note'&&value1）
{
console.log（值1.length）
var pram=value1.子字符串（value1.length-1，value1.length）；
开关（婴儿车）
{
案例“n”：
value1=（value1.子字符串（0，value1.长度-1））*.00000000 1；
打破
案例“p”：
value1=（value1.子字符串（0，value1.长度-1））*.000000000001；
打破
案例“m”：
value1=（value1.子字符串（0，value1.长度-1））*.001；
打破
案例“u”：
value1=（value1.子字符串（0，value1.长度-1））*.000001；
打破
案例“k”：
value1=（value1.子字符串（0，value1.长度-1））*1000；
打破
案例“M”：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery-2.2.5.min.js" type='text/javascript'></script>
<script src="bootstrap.min.js" type='text/javascript'></script>
<script src="angular.min.js" type='text/javascript'></script>
<script src="parent_child_mapping.js" type='text/javascript'></script>
<script src="products.js" type='text/javascript'></script>
<script src="app.js" type='text/javascript'></script>
<script src="indexController.js" type='text/javascript'></script>
<style>
.clsProductDetailsHldr .well
{
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 4px;
}
.inputError
{
border: 1px solid red;
background-color: antiquewhite;
}
.row
{
margin-bottom: 4px;
}
</style>
</head>
<body ng-app="productspoc">
<div ng-controller="indexCtrl">
<div class="container clsProductDetailsHldr">
<div ng-repeat="product in products track by $index">
<div class="well" ng-class="{'col-sm-6':!checkIfProductHasChildren(product)}">
<div class="row">
<span class="" ng-class="{'col-sm-10':checkIfProductHasChildren(product),'col-sm-4':!checkIfProductHasChildren(product)}">{{product}}</span>
<span class="col-sm-4" ng-if="!checkIfProductHasChildren(product)">
<input type="text" value="" ng-model="productsObj[''+product]" />
</span>
<span class="col-sm-2" ng-if="checkIfProductHasChildren(product)">
<input type="button" class="btn" value="Add Child" ng-click="addChildToParent(product)" />
</span>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<span class="col-sm-10" ng-if="checkIfNewChild(product,key)">
<input type="button" class="btn" value="Remove Child" ng-click="removeChildFromParent(product, key)" />
</span>
<div class="col-sm-4" ng-if="checkIfProductHasChildren(product)" ng-repeat="(key1, value1) in productsObj[''+product] track by $index">
<span class="col-sm-2">{{key1}}</span>
<span class="col-sm-2">
<input type="text" ng-focus="onInputFocus($event)" value="" ng-model="productsObj[''+product][''+key1]" />
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="text-align:center;">
<span>
<input type="button" value="clear" class="btn btn-primary" ng-click="onClearClick()" />
</span>
<span>
<input type="button" value="Save" class="btn btn-success" ng-click="onSaveClick()" />
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(".clsAddChild").click(function()
{
var newChild = "";
newChild+= '<div class="row">';
newChild+= '<div class="col-sm-12" style="padding-left:20px;"><span>NewChild Child 1</span></div>';
newChild+= '</div>';
newChild+= '<div class="row">';
newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 1</span><span><input type="text" /></span></div>';
newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 2</span><span><input type="text" /></span></div>';
newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 3</span><span><input type="text" /></span></div>';
newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 4</span><span><input type="text" /></span></div>';
newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 5</span><span><input type="text" /></span></div>';
newChild+= '</div>';
$(this).closest(".parentChildWrapper").append(newChild);
});
</script>
</body>
</html>
indexController.js
angular.module('productspoc')
.controller('indexCtrl',['$scope', function ($scope) {
$scope.productsObj = {};
$scope.products = products;
$scope.parentChildMapping = parentChildMapping;
$scope.checkIfProductHasChildren = function(product)
{
return product in $scope.parentChildMapping;
};
$scope.addChildToParent = function(parent)
{
var porductIndex = products.indexOf(parent);
products.splice(porductIndex + 1, 0, parent + 1);
$scope.parentChildMapping[parent +1]= parent + 1;
$scope.productsObj[""+parent +1]= {"Min": "","Typ":"","Max": ""};
console.log($scope.productsObj);
};
$scope.checkIfNewChild = function(product,key)
{
if(( product.indexOf("1") ===2 || product.indexOf("1") ===3 ||product.indexOf("1") ===4))
return true;
else
return false;
};
$scope.removeChildFromParent = function(product, key)
{
delete $scope.productsObj[""+product];
var porductIndex = products.indexOf(product);
products.splice( porductIndex, 1 );
};
$scope.onClearClick = function()
{
var r=confirm("Are you sure, wanted to reload the page. If yes then click on OK, else Cancel and resume your work.");
if (r==true){
window.location.reload();
angular.element(".clsProductDetailsHldr input[type='text']").val("");
}
else{
}
};
$scope.validateNumberFields = function()
{
var isValid = true;
angular.forEach(angular.element(".clsProductDetailsHldr .onlyNumbers"), function(value, index){
if(isNaN(angular.element(value).val()))
{
isValid = false;
angular.element(value).addClass("inputError");
}
});
return isValid;
};
$scope.onInputFocus = function(event)
{
angular.element(event.currentTarget).removeClass("inputError");
};
$scope.onSaveClick = function()
{
var isValid = $scope.validateNumberFields();
if(!isValid)
{
alert("Selected Input feild has invalid number");
return;
}
angular.forEach($scope.productsObj, function(value, key){
if(value instanceof Object && value.hasOwnProperty('newChildCount'))
delete value.newChildCount;
if(value instanceof Object)
{
angular.forEach(value, function(value1, key1)
{
// Below code will check
// key1 should not be a Note and value1 should have some value
if(key1!=='Note' && value1)
{
console.log(value1.length)
var pram = value1.substring(value1.length-1, value1.length);
switch (pram)
{
case "n":
value1 = (value1.substring(0,value1.length-1))*.000000001;
break;
case "p":
value1 = (value1.substring(0,value1.length-1))*.000000000001;
break;
case "m":
value1 = (value1.substring(0,value1.length-1))*.001;
break;
case "u":
value1 = (value1.substring(0,value1.length-1))*.000001;
break;
case "k":
value1 = (value1.substring(0,value1.length-1))*1000;
break;
case "M":
value1 = (value1.substring(0,value1.length-1))*1000000;
break;
case "G":
value1 = (value1.substring(0,value1.length-1))*1000000000;
break;
default:
value1;
break;
}
$scope.productsObj[key][key1] = value1 ;
console.log(pram);
}
console.log(value1);
});
}
});
console.log(JSON.stringify($scope.productsObj));
console.log($scope.productsObj);
var sub=confirm("Data will be saved on click of OK button.");
if (sub==true)
{
$.ajax({
url: "/rest/products/add/",
type: "POST",
dataType: "json", // expected format for response
contentType: "application/json", // send as JSON
data: JSON.stringify($scope.productsObj),
complete: function() {
$window.location.href = "#/success.html";
alert( "Data saved to database: " + data );
console.log('success response' + response)
},
success: function(data) {
$window.location.href = "#/success.html";
alert( "Data saved to database: " + data );
console.log('success response' + response)
},
error: function() {
//called when there is an error
},
});
}
else
{
}
};
$scope.initProductDetails = function()
{
for(var i=0;i<$scope.products.length;i++)
{
if($scope.products[i] in parentChildMapping)
{
$scope.productsObj[""+$scope.products[i]] = {};
$scope.productsObj[""+$scope.products[i]].newChildCount = 0;
$scope.productsObj[""+$scope.products[i]] = {"Min": "","Typ":"","Max": ""};
}
else
$scope.productsObj[""+products[i]] = "";
}
};
$scope.initProductDetails();
}]);
products.js
products = [
"Part_Number",
"Name",
"Code",
"absmax_1",
"absmax_2",
"absmax_3",
"absmax_4"
]
parent_Child_Mapping.js
parentChildMapping ={
"absmax_1":"absmax_1",
"absmax_2":"absmax_2",
"absmax_3":"absmax_3",
"absmax_4":"absmax_4",
}
<html>
<head>
<script>
function cloneMe(){
var tT = document.querySelectorAll('.Content > div'); //All the div inside .Content;
var tL = tT[tT.length - 1]; //The last div - the one to get copied
var tC = tL.cloneNode(true);// Deep cloning the last div 'tL'
tL.parentNode.appendChild(tC) //Adding the copy to the parent of the last div 'tL'
}
</script>
</head>
<body>
<button onclick = 'cloneMe()'>Add</button>
<div class = 'Content'>
<div>
<input name = 'min' type = 'text' placeholder = 'min' />
<input name = 'typ' type = 'text' placeholder = 'typ' />
<input name = 'max' type = 'text' placeholder = 'max' />
</div>
</div>
</body>
</html>