编辑数组中的对象并显示信息

Question

我有一个对象数组 (myData)，其中包含类型为“内部”和“外部”的对象。

我正在从数组中的对象中创建 class="box" 的 div，并显示相应对象的一些信息。

我在 div.box 中有一个编辑按钮，只有当我的对象类型为 =“external”时。

单击编辑按钮后，我应该能够在包含输入字段的模式或弹出窗口中编辑数据。这些输入字段将显示数组中该特定对象的每个属性的值。 因此，单击编辑时，我想更新“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'): ''
      )
    )
  });
}

.box{
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;
}

<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>

Answer 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">&times;</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中的代码