javascript - js如何批量修改隐藏域的name值？

Question

我需要给后台传一组array数据，隐藏域是这样的：

html<input type="hidden" name="attr[0][name]" value="a1">
<input type="hidden" name="attr[0][age]" value="a2">
<input type="hidden" name="attr[0][tel]" value="a3">

<input type="hidden" name="attr[1][name]" value="b1">
<input type="hidden" name="attr[1][age]" value="b2">
<input type="hidden" name="attr[1][tel]" value="b3">

<input type="hidden" name="attr[2][name]" value="c1">
<input type="hidden" name="attr[2][age]" value="c2">
<input type="hidden" name="attr[2][tel]" value="c3">

一条列表是一组数据，第一维的key是递增的，第二维是一样的
我的问题是：这个时候我删除一条数据，我希望将后面的数据补到前面来，例如，删除第二条数据，希望得到的结果是：

html<input type="hidden" name="attr[0][name]" value="a1">
<input type="hidden" name="attr[0][age]" value="a2">
<input type="hidden" name="attr[0][tel]" value="a3">

<input type="hidden" name="attr[1][name]" value="c1">
<input type="hidden" name="attr[1][age]" value="c2">
<input type="hidden" name="attr[1][tel]" value="c3">

请教js如何批量修改？还是说给后台传数组数据，我这样写name值不对？

---

不好意思，怪我没有讲清楚，事实情况比这个复杂的多
1. 第二维数据是由后台输出给我的，并不是我这里简单写死的name、age，即我的隐藏域是列表索引 + 遍历后台变量组成的
2. 隐藏域的name也有可能是三维，这个要看具体数据
因此我的问题其实是，如何只修改第一维的索引而保持其他值(包括name后面的维度和value值)不变

Answer 1

假设我们的结构是下面这样的

<p class="js-person">
    <input type="hidden" name="attr[0][name]" class="js-name" value="a1">
    <input type="hidden" name="attr[0][age]" class="js-age" value="a2">
    <input type="hidden" name="attr[0][tel]" class="js-tel" value="a3">
</p>
<p class="js-person">
    <input type="hidden" name="attr[1][name]" class="js-name" value="b1">
    <input type="hidden" name="attr[1][age]" class="js-age" value="b2">
    <input type="hidden" name="attr[1][tel]" class="js-tel" value="b3">
</p>
<p class="js-person">
    <input type="hidden" name="attr[2][name]" class="js-name" value="c1">
    <input type="hidden" name="attr[2][age]" class="js-age" value="c2">
    <input type="hidden" name="attr[2][tel]" class="js-tel" value="c3">
</p>

我们可以大刀阔斧的重新计算一遍

$('.js-person').each(function(i) {
    $(this).find('.js-name').attr('name', 'attr[' + i + '][name]');
    $(this).find('.js-age').attr('name', 'attr[' + i + '][age]');
    $(this).find('.js-tel').attr('name', 'attr[' + i + '][tel]');
});

Answer 2

每次的传的数据如果是一样的话，为什么不能分次传呢？

Answer 3

为啥非得搞个input出来？你用js的变量去处理不是更好？

Answer 4

javascriptvar attr = [
  {
    "name":"a1",
    "age" :"b2",
    "tel" : "b3"
  },
  {
    "name":"a1",
    "age" :"b2",
    "tel" : "b3"
  },
  {
    "name":"a1",
    "age" :"b2",
    "tel" : "b3"
  }

]

像这样不是更能满足你的需求嘛？

如果是form表单提交的话，可以使用FormData.append()方法把数据加进去和表单里别的字段一起提交。

如果一定要渲染dom的话，可以用类似handlebars这样的模板引擎，然后与数据做单向绑定，数据更新==>dom更新，这样也有利于数据的获取啊~

Answer 5

按照你的意思，我大概用 js + jQuery 写个算法，不过就偷个懒不去运行调试了

首先，目标是第一维，就是 attr[n] 这一维，这个 attr 暂且称为第一维的名称。如果页面里只第一维的名称只有一个，会比较好处理，先来处理这种情况。

另外，这一部分 <input> 是比较规则的，假设它们的容器 ID 是 container，这样方便限制上下文。

javascriptint index = -1;     // 新的 index，第1次使用时会 +1 所以从 -1 开始
int lastIndex = -1; // 检查旧的 index 变化，初始要与所有已使用的 index 不同，所以 -1

// 找到所有 container 下的 input[type=hidden]，遍历处理名称
// 这里假设所有 input[type=hidden] 的第一维序号是顺序的（不乱）
$("#container input[type=hidden]).each(function() {
    var input = $(this)

    // 取出 name，用正则表达式把第一维 name，序号 和剩余部分拆分开来，
    // 比如 attr[0][name] 拆出来是
    // ["attr[0][name]", "attr", "0", "[name]"]
    var m = input.attr("name").match(/^(.*?)\[(\d+)\](.*)$/)

    var name = m[1]
    var currentIndex = ~~m[2]    // 当前序号，转换成整数

    // 当前序号与上次序号不等，说明序号已经变化，需要对 index 增加
    if (currentIndex != lastIndex) {
        index++
        lastIndex = currentIndex
    }

    // 拼新的 name
    var newName = name + "[" + index + "]" + m[3]
    input.attr("name", newName)
})

如果这些 <input> 有多个第一维名称，那需要将上面的函数封装，同时将 index 和 lastIndex 封装到一个对象中，作个映射表，每次取得 name 之后都从映射表里把 { index, lastIndex } 对象取出来进行处理。这个情况要复杂得多，如果你没理解我们再讨论。