form表单内容编辑时 只提交已经修改的部分,未修改的部分不提交

在工作中我们会遇到这样的需求,就是在内容编辑的时候提供修改内容的log日志,这个时候就需要我们在提交的时候,只提交内容修改的部分,而不修改的部分不需要提交.这样其实很简单,就是需要我把原始的数据放到一个数组或者对象里面,(这里需要注意一点,就是不要直接用等于 = , 这样会把原始数据浅拷贝到你存储的数组或对象里面,可能存在你编辑了内容之后,你存贮的原始数据也会被修改,这个时候你需要深拷贝数据就可以了).然后在通过for循环遍历对比即可.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    // 旧数据
    var oldData = {
      fieldName: "wangsan",
      fieldType: "number",
      fieldValue: "我是字段内容",
      fieldId: 345,
      fieldValueIp: '1.1.1.1',
      arr: {
        childName: "wansan",
        childIp: '3.3.1.3'
      }
    }
    // 表单修改后的数据
    var data = {
      fieldName: "wangsan",
      fieldType: "string",
      fieldValue: "我是字段内容",
      fieldId: 345,
      fieldValueIp: '1.1.2.1',
      arr: {
        childName: "wansan",
        childIp: '3.3.3.3'
      }
    }
    var newData = {}; // 修改之后的数据
   
    // $.each(oldData, (item, i) => {
    //   if (data[item] !== i) {// 对比数据,不一样的保存到 newData 中
    //     newData[item] = data[item]
    //   }
    // })
    Object.keys(oldData).forEach(key => {
      if (oldData[key] !== data[key]){ // 对比数据,不一样的保存到 newData 中
        newData[key] = data[key]
      }
    })
    console.log(newData) //{fieldType: "string", fieldValueIp: '1.1.2.1',arr: {childName: "wansan", childIp: '3.3.3.3'}, }
  </script>
</body>

</html>

如果这篇文章对您有所帮助,请帮忙点一个小小的赞,如果大家有更好的解决方法或者有任何疑问都可以私信我,

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 Bootstrap 的表单组件来实现行内编辑功能。具体实现步骤如下: 1. 使用 `form-inline` 类来创建一个行内表单组件。 2. 在表单组件中添加一个文本输入框,用于用户输入修改后的内容。 3. 添加一个 “编辑” 按钮,用于触发编辑状态。 4. 使用 JavaScript 监听 “编辑” 按钮的点击事件,并将当前行的内容赋值给文本输入框。 5. 当用户完成编辑后,点击 “保存” 按钮,将修改后的内容提交到后台。 以下是一个示例代码: ```html <table class="table"> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><span class="editable">John Doe</span></td> <td><span class="editable">johndoe@example.com</span></td> <td> <button class="btn btn-primary edit-btn">Edit</button> <button class="btn btn-success save-btn" style="display:none;">Save</button> </td> </tr> <tr> <td>2</td> <td><span class="editable">Jane Doe</span></td> <td><span class="editable">janedoe@example.com</span></td> <td> <button class="btn btn-primary edit-btn">Edit</button> <button class="btn btn-success save-btn" style="display:none;">Save</button> </td> </tr> </tbody> </table> <script> $(document).ready(function() { // 绑定编辑按钮的点击事件 $('.edit-btn').click(function() { var row = $(this).closest('tr'); var cells = row.find('.editable'); cells.each(function() { var content = $(this).html(); var input = $('<input type="text" class="form-control">'); input.val(content); $(this).html(input); }); $(this).hide(); row.find('.save-btn').show(); }); // 绑定保存按钮的点击事件 $('.save-btn').click(function() { var row = $(this).closest('tr'); var cells = row.find('.editable'); cells.each(function() { var content = $(this).find('input').val(); $(this).html(content); }); $(this).hide(); row.find('.edit-btn').show(); // TODO: 提交修改后的内容到后台 }); }); </script> ``` 在上面的代码中,我们使用了 jQuery 来绑定按钮的点击事件,并在点击事件中完成了行内编辑提交功能。你可以将代码复制到你的项目中,根据需要进行调整和修改

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值