如何在克隆上使用Jquery增加输入字段上的id

时间:2010-11-18 12:27:38

标签: jquery

我正在尝试增加一个表单字段ID,这样当我点击加号创建一行输入字段时,它们就会有所不同。

到目前为止,这是我的代码

//Order Form
    $("#add").click(function() {
        $('#ordertable tbody>tr:last').clone(true).insertAfter('#ordertable tbody>tr:last');
        $('#ordertable tbody>tr:last #prodcode').val('');
        $('#ordertable tbody>tr:last #meterage').val('');
        $('td.imgsample:last a').remove();
        return false;
    });

在点击功能的第一行,如何更改输入字段(prodcode& meterage)为prodcode1 meterage1 e.t.c

2 个答案:

答案 0 :(得分:3)

假设你要经常这样做一次。

//Somewhere global
var counter = 0;
//Order Form
$("#add").click(function() {
    counter++;
    var cln = $('#ordertable tbody>tr:last').clone(true);
    cln.find("[id^='prodcode'], [id^='meterage']").each(function(i, val) {
        val.id = val.id.match(/^([^0-9]+)[0-9]*$/)[1] + "" + counter;
    });
    cln.insertAfter('#ordertable tbody>tr:last');
    $('#ordertable tbody>tr:last #prodcode').val('');
    $('#ordertable tbody>tr:last #meterage').val('');
    $('td.imgsample:last a').remove();
    return false;
});

当然,在没有使用全球计数器的情况下,存在“更清洁”的解决方案

对于第一条评论中提到的问题

$("tr [id^='prodcode'], tr [id^='meterage']").live("blur", function() {
    ....
    $(this).val() //instead of $("#prodcode").val()
    ....
});

应该

答案 1 :(得分:0)

$('#ordertable tbody>tr:last #prodcode')
.val('')
.attr(
  'id', function(i,id) {
         match = id.match(/\d+?$/);
         if ( match.length ) { match++; return 'prodcode' + match } // could be match[0], may return array!
         else return id + 1 // or '2' if you wish
        }
);

下一个元素相同。