Question

我对jquery很新。我有一个包含多行的html表，每行包含多个单元格。现在我想重命名行的删除操作中每个单元格中控件的'name'属性。这是我的HTML：

<table id="workDescTable" class="table invoice-table">
    <tr>
        <th>Item</th><th>Description</th><th>Cost</th><th>Quantity</th><th>Taxable</th><th>Line Total</th><th></th>
    </tr>
<tbody id="NewWorkDesc">
    <tr>
        <td style="min-width: 200px">
            <div class="form-group" style="min-width: 100%">
                <textarea class="form-control text-box multi-line" name="Invoice.WorkDesc[0].WorkItemName" style="min-width: inherit"></textarea>
            </div>
        </td>
        <td style="min-width: 300px">
            <div class="form-group" style="min-width: 100%">
                <textarea class="form-control text-box multi-line" name="Invoice.WorkDesc[0].WorkDescription" style="min-width: inherit"></textarea>
            </div>
        </td>
        <td style="max-width: 100px">
            <div class="form-group">
                <input class="form-control text-box single-line" id="Amount0" alt="0" name="Invoice.WorkDesc[0].Amount" type="number" value="0">
            </div>
        </td>
        <td style="max-width: 75px">
            <div class="form-group">
                <input class="form-control text-box single-line" id="qty0" alt="0" name="Invoice.WorkDesc[0].Quantity" type="number" value="1">
            </div>
        </td>
        <td style="max-width: 10px">
            <div class="form-group">
                <input class="form-control text-danger" id="taxable0" alt="0" name="Invoice.WorkDesc[0].Taxable" type="checkbox" value="true">
            </div>
        </td>
        <td>
            <div class="form-group">
                <input class="form-control text-box single-line" id="lineTotal0" alt="0" name="Invoice.WorkDesc[0].LineTotal" type="number" value="0">
            </div>
        </td>
        <td><a id="deleteWorkDesc" value="" class="glyphicon glyphicon-trash" style="color:red"></a>

        </td>
    </tr>

这是我的jquery：

$(document).ready(function () {
    $('table').on('click', '#deleteWorkDesc', function () {
        $(this).closest('tr').remove();
        var tableRows = $('#NewWorkDesc tr');
        $.each(tableRows, function (i, val) {

            //here i want to loop the rows and rename the name attribute of controls in each cell. 
            // for ex I want to change the  name="Invoice.WorkDesc[3].Taxable" to name="Invoice.WorkDesc[1].Taxable"  just changing index values
        });
    });
});

这里还有一个小提琴：Fiddle

Answer 1

您需要稍微更改选择器，并用实际索引替换[2]内容。你在这里：

$(document).ready(function () {
    $('table').on('click', '#deleteWorkDesc', function () {
        $(this).closest('tr').remove();
        var tableRows = $('#NewWorkDesc tr');
        $('#workDescTable tr').each(function (i, val) {

            $(this).find("input, textarea").each( function (n, nval) {
            //here i want to loop the rows and rename the name attribute of controls in each cell. 
            // for ex I want to change the  name="Invoice.WorkDesc[3].Taxable" to name="Invoice.WorkDesc[1].Taxable"  just changing index values
                $(this).attr('name', $(this).attr('name').replace(/\[\d+\]/, "[" + (i+1) + "]") );
                console.log($(this).attr('name'));
            });
        });
    });
});

更新了小提琴：http://jsfiddle.net/bajfgxqz/7/

它吐了出来：

Invoice.WorkDesc[2].WorkItemName
Invoice.WorkDesc[2].WorkDescription
Invoice.WorkDesc[2].Amount
Invoice.WorkDesc[2].Quantity
Invoice.WorkDesc[2].Taxable
Invoice.WorkDesc[2].LineTotal
Invoice.WorkDesc[3].WorkItemName
Invoice.WorkDesc[3].WorkDescription
Invoice.WorkDesc[3].Amount
Invoice.WorkDesc[3].Quantity
Invoice.WorkDesc[3].Taxable
Invoice.WorkDesc[3].LineTotal
...

jquery获取表的每一行并重命名其名称属性

1 个答案: