Changing the property name dynamically on click of a button : Javascript

Question

Hi,

Iam ading rows in a table on click of add button.

Each row contains name,class,year text boxes.

For the 1st row : property name will be...... name_1,class_1,year_1 

For the 2nd row : property name will be...... name_2,class_2,year_2 

If suppose, i delete the 1st row (name_1,class_1,year_1) then the second row's property name should becomes

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

Need help on this.

Thanks and Regards, Babu

Answer 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.

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

Answer 2

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

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

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