我有一个对象数组(myData),其对象的类型为" internal"和"外部"。
我用class =" box"创建div超出数组中的对象并显示相应对象的一些信息。
我在div.box中有一个编辑按钮,只有当我的对象类型="外部"时。
单击编辑按钮,我应该能够在包含输入字段的模式或弹出窗口中编辑数据。这些输入字段将显示该数组中该特定对象的每个属性的值。 因此,点击编辑后,我想在“myData”中更新该对象的信息(公司或网址)。阵列。此外,在显示的div中,我希望显示更新的信息。
我如何实现这一目标?
以下是代码:
var myData = [{company: "ABC", url:"www.abc.com", type:"internal"},{company: "CDE", url:"www.cde.com", type:"internal"},{company: "DEF", url:"www.def.com", type:"external"},{company: "EFG", url:"www.efg.com", type:"internal"},{company: "FGH", url:"www.fgh.com", type:"external"}];
$('#createData').click(function(){
createDisplay();
});
function createDisplay(){
myData.forEach(function(obj){
$('.container').append(
$('<div>').addClass('box').append(
$('<label>').text('Company Website: '),
$('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
obj.type =='external'? $('<br /><button>').addClass('.edit-btn').text('Edit'): ''
)
)
});
}
&#13;
.box{
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin-top: 5px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="container">
</div>
<button id="createData">Create divs</button>
&#13;
答案 0 :(得分:1)
编辑对象中的数据并更新显示,假设您可以访问新数据
$("body").on("click", ".edit-btn", function(){
$anchor = $(this).siblings("a.compUrl");
var name = $anchor.text();
var objIndex = myData.findIndex(function(el) {
return el.company == name
});
// var newCompanyName = "";
// var newCompanyUrl = "";
myData[objIndex] = {
"company": newCompanyName,
"url": newCompanyUrl,
"type": "external"
};
$anchor.attr('href', newCompanyUrl).text(newCompanyName);
});
编辑:更新了代码,以包含用于保存新数据的弹出窗口。
<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Update Data</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label class="col-sm-2 control-label" for="companyName">Company Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="companyName" placeholder="Company Name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="companyUrl">Company URL</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="companyUrl" placeholder="Company URL" />
</div>
</div>
<input type="hidden" value="" id="targetRow">
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="saveNewData">
Save changes
</button>
</div>
</div>
</div>
</div>
和JS
$("body").on("click", ".edit-btn", function() {
var row = $(this).closest('.box').index();
$("#targetRow").val(row);
$("#updateData").modal("show");
});
$("body").on("click", "#saveNewData", function() {
//Validate the new Data
if (valid) {
updateData();
$("#companyName, #companyUrl, #targetRow").val("");
$("#updateData").modal("hide");
}
});
function updateData() {
var rowIndex = $("#targetRow").val(),
row = $(".container").find(".box").eq(rowIndex),
newCompanyName = $("#companyName").val(),
newCompanyUrl = $("#companyUrl").val();
$anchor = row.find("a.compUrl");
var name = $anchor.text();
var objIndex = myData.findIndex(function(el) {
return el.company == name
});
myData[objIndex] = {
"company": newCompanyName,
"url": newCompanyUrl,
"type": "external"
};
$anchor.attr('href', newCompanyUrl).text(newCompanyName);
}
更新了此fiddle
中的代码