Question

我试图通过克隆最后一行并修改其id来动态地在我的表中添加一个新行，以便我提交表单时我的MVC ModelBinder会选择它。下面是为表格生成的html：

<tr id="trImg_-1">
<td>
    <div class="form-group">
        <input id="MediaList_0__MediaCaption" class="form-control" type="text" value="Blah" name="MediaList[0].MediaCaption" data-val-required="The Image Caption field is required." data-val="true">
        <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MediaList[0].MediaCaption"></span>
    </div>
</td>
<td>
    <input id="MediaList_0__MediaCaptionDescription" class="form-control" type="text" value="Caption Desc" name="MediaList[0].MediaCaptionDescription" data-val-required="The Image Caption Description field is required." data-val="true">
</td>
<td>
    <input id="MediaList_0__SortOrder" class="form-control" type="text" value="0" name="MediaList[0].SortOrder" data-val-required="The Sort Order field is required." data-val-number="The field Sort Order must be a number." data-val="true">
    0
</td>
<td>
    <img class="img-thumbnail" alt="Product Image" src="CurrentImage">
</td>
    <td>
    <button id="btnRemoveImage" class="btn btn-danger btn-sm" type="button">
    </td>
</tr>

我已经实现了jquery来克隆行并创建一个新行，但我正努力将索引从MediaList_0__MediaCaption更改为MediaList_1__MediaCaption以获取其中的所有输入。有什么想法吗？

以下是我正在使用的jquery

var $tableBody = $('#tblImage').find("tbody");
        $trLast = $tableBody.find("tr:last");           // find last row
        $trNew = $trLast.clone();                       // clone to new row

        var tr_Id = $($trNew).attr('id');       // get row id *Mashed*
        var arr_RowStr = tr_Id.split('_');         // extract the indexarr_Row[1]
        var tr_RowIdOld = parseInt(arr_RowStr[1], 10);  // 10 is for decimal [Base 10]
        var tr_RowIdNew = tr_RowIdOld + 1;              // get new id

        var tr_FullNew = arr_RowStr[0] + '_' + tr_RowIdNew;     // get new id

        $trNew.attr('id', tr_FullNew);

        $trNew.find('input:text').val('');

        $trLast.after($trNew);

Answer 1

查找最后一行
克隆最后一行并将其存储在变量
找到要更改属性的所有元素
使用正则表达式从属性中删除所有非数字并存储在变量
将1添加到变量并使用attr替换当前的attr（＆＃34; id＆＃34;）。replace（currrentID，newID）

请参阅以下代码

希望有所帮助。

HTML

    <table id="tbl">

    <tr id="trImg_-1">
    <td>
        <div class="form-group">
            <input id="MediaList_0__MediaCaption" class="form-control" type="text" value="Blah" name="MediaList[0].MediaCaption" data-val-required="The Image Caption field is required." data-val="true">
            <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MediaList[0].MediaCaption"></span>
        </div>
    </td>
    <td>
        <input id="MediaList_0__MediaCaptionDescription" class="form-control" type="text" value="Caption Desc" name="MediaList[0].MediaCaptionDescription" data-val-required="The Image Caption Description field is required." data-val="true">
    </td>
    <td>
        <input id="MediaList_0__SortOrder" class="form-control" type="text" value="0" name="MediaList[0].SortOrder" data-val-required="The Sort Order field is required." data-val-number="The field Sort Order must be a number." data-val="true">
        0
    </td>
    <td>
        <img class="img-thumbnail" alt="Product Image" src="CurrentImage">
    </td>
     <td>
        <button id="btnRemoveImage" class="btn btn-danger btn-sm" type="button">
    </td>
</tr>
</table>

JS

   $(function() {

    $lastRow = $("#tbl #trImg_-1");
    $lastRowCopy = $lastRow.clone();

    $lastRowCopy.find("input, span").each(function(index, elem) {
        if ($(elem).attr('id')) {
             var id = $(elem).attr('id').replace(/[^\d]/g, '');
            var newId = $(elem).attr('id').replace(id, parseInt(id,10)+1);
            $(elem).attr('id', newId);   
        }

        if ($(elem).attr('name')) {
            var curName = $(elem).attr('name').replace(/[^\d]/g, '');
            var newName = $(elem).attr('name').replace(curName, parseInt(curName,10)+1);
            $(elem).attr('name', newName);
        }

        if ($(elem).attr('data-valmsg-for')) {
            var curDatavalFor = $(elem).attr('data-valmsg-for').replace(/[^\d]/g, '');
            var newDataValFor = $(elem).attr('data-valmsg-for').replace(curDatavalFor, parseInt(curDatavalFor,10)+1);
            $(elem).attr('data-valmsg-for', newDataValFor);
        }

    });  
    console.log($lastRowCopy);
    $lastRow.after($lastRowCopy);  
});

小提琴：http://jsfiddle.net/cGL5F/

Answer 2

您可以使用String.prototype.replace方法：

$collection.attr('id', function(_, id) {
    return id.replace(/\d+/, function(n) { return ++n; });
});

http://jsfiddle.net/f3nUB/

Answer 3

我认为您可以尝试先使用.removeAttr()方法删除$trNew的原始ID，然后再使用attr()方法重新设置新ID。

Jquery替换id的一部分

3 个答案: