单击JavaScript中的按钮动态更改属性名称

I am adding rows in a table on click of an add button.

我在单击添加按钮时在表中添加行。

Each row contains name, class, year text boxes.

每行包含名称,类,年份文本框。

For the 1st row, the property name will be...... name_1, class_1, year_1.
For the 2nd row, the property name will be...... name_2, class_2, year_2.

对于第1行,属性名称为...... name_1,class_1,year_1。对于第2行,属性名称将为...... name_2,class_2,year_2。

If I delete the 1st row (name_1, class_1, year_1), the second row's property name should become

如果我删除第1行(name_1,class_1,year_1),则第二行的属性名称应该成为

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

How can I do this?

我怎样才能做到这一点?

2 个解决方案

#1

I wouldn't bother with doing that on the client side. In your server-side code, just check if the key exists in the POST array.

我不打扰在客户端这样做。在服务器端代码中,只需检查POST数组中是否存在密钥。

If you still want to rename the elements:

如果您仍想重命名元素:

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

you could do something like this (untested, should pretty much work...)

你可以做这样的事情(未经测试,应该做的很多......)

The 'delegate' inner method is required to maintain scope on the row.

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

setup:

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

add row:

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);
}

#1