簡體   English   中英

如何通過jQuery為動態表單元素分配動態ID

[英]how to assign dynamic id's for dynamic form elements through jquery

我正在使用jquery插件,該插件使用戶當時可以添加動態表單屬性,我想基於表行數分配動態ID,因為黑白表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。

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
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM