时间戳

首页 > 解决方案 > 如何通过 jquery 中的用户输入更新 json 中的值？

javascript - 如何通过 jquery 中的用户输入更新 json 中的值？

问题描述

我有 3 个文本框，当我输入值并单击添加按钮时，它会添加到新的 JSON 和表中，当我单击特定字段进行编辑时，它应该使用新的更新值更新链接的 json 值。我有两个隐藏字段：

$(document).ready(function() {
  var departments = [{
      "dep_id": 1,
      "dep_name": "Account",
      "deptnum": 10
    },
    {
      "dep_id": 2,
      "dep_name": "Software",
      "deptnum": 20
    },
    {
      "dep_id": 3,
      "dep_name": "Hardware",
      "deptnum": 30
    },
    {
      "dep_id": 4,
      "dep_name": "IT",
      "deptnum": 40
    }
  ];

  var json = [];
  $("#btn").click(function() {
    if ($("#dept").val() && $("#name").val() && $("#eid").val()) {
      var eid = $("#eid").val();
      var name = $("#name").val();
      var dept_id = $('#dept').val();
      var counter = $('#counter').val();
      counter++;

      //    var depart = departments.length;
      for (var i in departments) {
        var dep_obj = departments[i];
        if (dep_obj.dep_id == dept_id) {
          var dep = dep_obj;
        }
      }

      var emp = {
        "eid": eid,
        "name": name,
        "dept": dep,
      };

      var j_emp = JSON.stringify(emp);
      console.log(j_emp);
      json.push(j_emp);
      var obj = JSON.parse(j_emp);

      var x = '<tr><td id="eidA' + counter + '">' + obj.eid + '</td>' +
        '<td id="nameA' + counter + '">' + obj.name + '</td>' +
        '<td id="deptA' + counter + '">' + obj.dept.deptnum + '</td>' +
        '<td id="deptnoA' + counter + '">' + obj.dept.dep_name + '</td>' +
        '<td><input type="button" class="btn btn-primary" value="Edit"  id="bEdit' + counter + '" data-id="' + obj.dept.dep_id + '" data-counter="' + counter + '"></td></tr>';

      $(" #tab tr:last").after(x);
      $("#counter").val(counter);
      $("#eid").val('');
      $("#name").val('');
      $("#dept").val('');
      $("#bEdit" + counter).unbind('click');
      $("#bEdit" + counter).bind('click', form);
    }
  });

  function form() {
    var editCounter = $(this).data('counter');
    var id = $(this).data('id');
    var eId = $('#eidA' + editCounter).text();
    var name = $('#nameA' + editCounter).text();

    $('#eid').val(eId);
    $('#name').val(name);
    $('#dept').val(id);
    $('#chosen_counter').val(editCounter);

    $('#btn').hide();
    $('#btn1').show();
    $("#btn1").unbind('click');
    $("#btn1").bind('click', update);
  }

  function update() {
    var second = [];
    var counter = $('#chosen_counter').val();
    var eid = $('#eid').val();
    var name = $('#name').val();
    var dept_id = $('#dept').val();


    for (var i in departments) {
      var dep_obj = departments[i];
      if (dep_obj.dep_id == dept_id) {
        var dep = dep_obj;
      }
    }


    var a = $('#eidA' + counter).text(eid);
    var b = $('#nameA' + counter).text(name);
    var c = $('#deptA' + counter).text(dep.deptnum);
    var d = $('#deptnoA' + counter).text(dep.dep_name);
    $('#bEdit' + counter).data('id', dep.dep_id);



    $('#eid').val('');
    $('#name').val('');
    $('#dept').val(0);
    $('#chosen_counter').val(0);

    $("#btn1").unbind('click');
    $("#btn").show();
    $("#btn1").hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="counter" value="0" />
<input type="hidden" id="chosen_counter" value="0" />

<input type="text" class="input" id="eid" />

<input type="text" class="input" id="name" />

<select class="input" id="dept">
  <option value="0">Select department</option>
  <option value="1">10</option>
  <option value="2">20</option>
  <option value="3">30</option>
  <option value="4">40</option>
</select>

<input type="button" class="btn btn-success" value="Save" id="btn">
<input type="button" class="btn btn-success" value="Update" id="btn1">

<div class="show">

  <table id="tab" class="table table-bordered">
    <thead>
      <tr>
        <th>Emp_ID</th>
        <th>Name</th>
        <th>Dept_No</th>
        <th>Department</th>
        <th>Edit</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>

我试过这个：

但我认为我做错了......我是新手，所以我很难理解......我能够在新的 json 中获取这些值，但我不知道更新旧的值。

emp.foreach(function check(value, index, array) {
  if (value.choosencounter == counter) {
    emp[index].eid = eid;
    emp[index].name = name;
    emp[index].deptA = dep_val;
    emp[index].deptnoA = dep_name;
  }
});

标签： javascriptjqueryjson

解决方案

给你，我想你可以很容易地理解代码。

var j_emp = [];
var currentEditID = 0;
var departments = [{
    "dep_id": 1,
    "dep_name": "Account",
    "deptnum": 10
  },
  {
    "dep_id": 2,
    "dep_name": "Software",
    "deptnum": 20
  },
  {
    "dep_id": 3,
    "dep_name": "Hardware",
    "deptnum": 30
  },
  {
    "dep_id": 4,
    "dep_name": "IT",
    "deptnum": 40
  }
];
$(document).ready(function() {
  $("#btn").click(function() {
    if ($("#dept").val() && $("#name").val() && $("#eid").val()) {
      var emp = fetchFieldValues();
      j_emp.push(emp);
      renderTable();
      clearFieldValues();
    }
  });
});

function edit(item) {
  let id = $(item).attr('id');
  currentEditID = id;
  let emp = j_emp.filter(e => {
    return e.id == id;
  })[0];
  $('#eid').val(emp.eid);
  $('#name').val(emp.name);
  $('#dept').val(emp.dept.dep_id);
  $('#btn').hide();
  $('#btn1').show();
}

function update(prevVal) {
  var emp = fetchFieldValues();
  for (var i = 0; i < j_emp.length; i++) {
    if (j_emp[i].id == currentEditID) {
      j_emp[i] = emp;
      j_emp[i].id = currentEditID;
    }
  }

  renderTable();
  clearFieldValues();

  $("#btn").show();
  $("#btn1").hide();
}

function renderTable() {
  $("#tab tbody").empty();
  let html = '';
  j_emp.forEach(obj => {
    html += '<tr><td>' + obj.eid + '</td>' +
      '<td>' + obj.name + '</td>' +
      '<td>' + obj.dept.deptnum + '</td>' +
      '<td>' + obj.dept.dep_name + '</td>' +
      '<td><input type="button" class="btn btn-primary edit-button" id="' + obj.id + '" value="Edit" onclick="edit(this)"></td></tr>';
  });
  $("#tab tbody").append(html);
}

function fetchFieldValues() {
  return {
    "eid": $("#eid").val(),
    "name": $("#name").val(),
    "dept": departments.filter(e => {
      return e.dep_id == $('#dept').val();
    })[0],
    'id': new Date().getTime()
  };
}

function clearFieldValues() {
  $("#eid").val('');
  $("#name").val('');
  $("#dept").val('');
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<input type="hidden" id="counter" value="0" />
<input type="hidden" id="chosen_counter" value="0" />

<input type="text" class="input" id="eid" />

<input type="text" class="input" id="name" />

<select class="input" id="dept">
  <option value="0">Select department</option>
  <option value="1">10</option>
  <option value="2">20</option>
  <option value="3">30</option>
  <option value="4">40</option>
</select>

<input type="button" class="btn btn-success" value="Save" id="btn">
<input type="button" class="btn btn-success" value="Update" id="btn1" onclick="update()">

<div class="show">
  <table id="tab" class="table table-bordered">
    <thead>
      <tr>
        <th>Emp_ID</th>
        <th>Name</th>
        <th>Dept_No</th>
        <th>Department</th>
        <th>Edit</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>

推荐阅读