在 JavaScript 中单击按钮时动态更改属性名称答案

【问题标题】：Changing property name dynamically on click of button in JavaScript在 JavaScript 中单击按钮时动态更改属性名称
【发布时间】：2016-11-19 13:00:49
【问题描述】：

我通过点击添加按钮在表格中添加行。

每一行包含姓名、班级、年份文本框。

对于第一行，属性名称将是...... name_1, class_1, year_1。
对于第 2 行，属性名称将是...... name_2, class_2, year_2。

如果我删除第一行（name_1，class_1，year_1），第二行的属性名称应该变成

name_2,class_2,year_2 <==> name_1,class_1,year_1

我该怎么做？

【问题讨论】：

标签： javascript

【解决方案1】：

我不会在客户端这样做。在您的服务器端代码中，只需检查密钥是否存在于 POST 数组中。

如果您仍想重命名元素：

var f = document.myForm;
var removeThisOne = 3;
var current = removeThisOne + 1;

while (f['name_' + current]) {
    f['name_' + current].name = 'name_' + (current - 1);
    f['class_' + current].name = 'class_' + (current - 1);
    // etc
    ++current;
}

【讨论】：

【解决方案2】：

你可以做这样的事情（未经测试，应该几乎可以工作......）

需要'delegate'内部方法来维护行的范围。

设置：

var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.appendChild(tbody);
document.appendChild(table); // or wherever you want it.

添加行：

function clickHandler( row )
{
    function delegate()
    {
        tbody.removeChild(row);
    }
    return delegate;
}
for (var i in someObj)
{
    var row = document.createElement('tr')
    var td1 = document.createElement('td');
    var td2 = etc...

    td1.innerHTML = someObj[i].field1;
    row.appendChild(td);
    td2 = etc...

    var del = document.createElement("input");
    input.type="button";
    input.value = "delete";
    input.onclick = clickHandler(row);
    tdX.appendChild(del);

    tbody.appendChild(row);
}

【讨论】：