如何通过jQuery为动态表单元素分配动态ID

Question

i'm using jquery plugin which enables the user to add dynamic form attributes at that time i want to assign dynamic id's based on table row count because the form elements present in b/w table tr td. here is my code for generating dynamic tr's

<script>

function onClick(e) {
    var element = e.target.querySelector('[contenteditable]'), row;

    element && e.target != document.documentElement && e.target != document.body && element.focus();

    if (e.target.matchesSelector('.add')) {
        var rc = $('.inventory tbody tr').length; //rcount
                   document.querySelector('table.inventory tbody').appendChild(generateTableRow(rc));
    }
    else if (e.target.className == 'cut') {
        row = e.target.ancestorQuerySelector('tr');

        row.parentNode.removeChild(row);
    }


}

 function generateTableRow(x) {
        var emptyColumn = document.createElement('tr');
        var now=Number(x)+1; 
        alert(now);     
emptyColumn.innerHTML = '<td><a class="cut">-</a><span contenteditable><input type="text" id="now" name="products[]" onkeydown=display(now,this.value)></span></td>' +
        '<td><span contenteditable></span></td>' +
        '<td><span data-prefix>$</span><span contenteditable>0.00</span></td>' +
        '<td><span contenteditable>0</span></td>' +
        '<td><span data-prefix>$</span><span>0.00</span></td>';

    return emptyColumn;
}

function display(id,value)
{
alert(id); // here it was displaying as object node list.it was not showing its id which was a number.
}
</script>

please help me to get the exact id of a particular text field.

Answer 1

Now is variable....

When you are using variables in an inline javascript you should take care of the inverted commas...

Use this code....

function generateTableRow(x) {
    var emptyColumn = document.createElement('tr');
    var now=Number(x)+1; 
    emptyColumn.innerHTML = '<td><a class="cut">-</a><span contenteditable><input type="text" id="'+now+'" name="products[]" onkeydown=display(this)></span></td>' +
                            '<td><span contenteditable></span></td>' +
                            '<td><span data-prefix>$</span><span contenteditable>0.00</span></td>' +
                            '<td><span contenteditable>0</span></td>' +
                            '<td><span data-prefix>$</span><span>0.00</span></td>';
                     return emptyColumn;
}


function display(field){   // just pass the element
   alert(field.id+" , "field.value); // this will give id and value
}