如何通过jquery为动态表单元素分配动态id

时间:2014-01-27 09:35:18

标签: javascript jquery html

我正在使用jquery插件,它允许用户在那时添加动态表单属性我想根据表行计数分配动态id,因为表单元素存在于b / w表tr td中。 这是我生成动态tr的代码

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

请帮助我获取特定文本字段的确切ID。

1 个答案:

答案 0 :(得分:0)

Now是变量......

当你在内联javascript中使用变量时,你应该处理引号...

使用此代码......

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
}