如何将div的所有文本框值复制到另一个div文本框
我想将特定div的文本框内容复制到另一个div。
我正在遍历包含所有产品的产品数组，然后我使用parentChildMapping检查该产品是否有子项。
如果我们输入min，max，typ然后添加一个孩子的值，那么我希望复制我们为min，max，typ输入的所有值。
<!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",
}
1 个答案:
答案 0 :(得分：0)
你可以将他想要克隆的所有元素放在div中并克隆整个div。下面是一个显示此类行为的小示例代码：
<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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？