bootstrap 点击按钮添加行 删除行

html

<div class="row" style="margin-top:10px;margin: 2px;padding: 0px 40px;">
            <table id="MechanicalledgerTable">
                <thead>
                <tr>
                    <th data-field="selectItem" data-checkbox="true"></th>
                </tr>
                </thead>
            </table>
            <button type="button" class="btn btn-warning" style="width: 100px;margin: 20px 20px 20px 0px;
                background-color: #FFFF00;border-color: #0C0C0C;color: #0C0C0C"
                    onclick="Mechanicalledger.addRow()">+行追加
            </button>
            <button type="button" class="btn btn-warning"
                    style="width: 100px;margin: 20px 20px 20px 20px;background-color: #FFFF00;
                        border-color: #0C0C0C;color: #0C0C0C"
                    onclick="Mechanicalledger.deleteRow()">-行削除
            </button>
            <div>
                <button type="button" class="btn btn-warning" style="width: 100px;left: 0;position: fixed;bottom: 0;
                background-color: #FFFF00;border-color: #0C0C0C;color: #0C0C0C;margin-bottom: 3px;left: 0;
                position: fixed;bottom: 0;" onclick="location.href='${ctxPath}'">戻&nbsp;&nbsp;る
                </button>
                <button type="button" class="btn btn-warning"
                        style="width: 100px;float: right;background-color: #FFFF00;right: 0;position: fixed;bottom: 0;
                        border-color: #0C0C0C;color: #0C0C0C;margin-bottom: 3px;right: 0;position: fixed;bottom: 0;"
                        onclick="Mechanicalledger.submitOperation()">実&nbsp;&nbsp;行
                </button>
            </div>
        </div>

js初始化 table 

/**
 * 初始化表格的列
 */
Mechanicalledger.initColumn = function () {
    return [
        {field: 'selectItem', checkbox: true},
        {
            title: 'NO', align: 'center',field: 'order_number', valign: 'middle',
            formatter: function (value, row, index) {
                return row.order_number = index + 1;
            }
        },
        {
            title: '品番コード',
            field: 'part_num_re_cd',
            visible: true,
            align: 'center',
            width: '30%',
            valign: 'middle',
            formatter(value, row, index) {
                return Mechanicalledger.inputFormatter(this.field, "text", value, row, index);
            }
        },
        {title: '銘柄コード', field: 'brand', visible: true, align: 'center', valign: 'middle'},
        {title: '品名', field: 'machine_parts', align: 'center', valign: 'middle'},
        {
            title: '枚数',
            field: 'quantity',
            align: 'center',
            valign: 'middle',
            formatter(value, row, index) {
                return '<div>' +
                    '<input type="text" class="form-control"  ' +
                    'style="height: 40px;width: 80px;margin:0 auto;text-align: end" id="' + this.field + index + '" ' +
                    'name="' + index + '" oninput="quantityOnInput (event)" ' +
                    'onpropertychange="OnPropChanged (event)" onkeyup="value=value.replace(/[^\\d]/g,\'\')"></div>';
            }
        }
    ];
};

js  添加行

/**
 * 新增一行数据
 */
Mechanicalledger.addRow = function () {
    var count = $('#' + this.id).bootstrapTable('getData').length;
    $('#' + this.id).bootstrapTable('insertRow',
        {
            index: count,
            row: {
                part_num_re_cd: "",
                brand: '',
                machine_parts: '',
                quantity: ''
            }
        }
    );
    //将表内数据遍历，在数据修改导致重置后，遍历和表内数据，
    var counts = $('#' + this.id).bootstrapTable('getData');
    for (var i = 0; i < counts.length; i++) {
        var partNumInput = $("#part_num_re_cd" + i);
        var partNumName = counts[i].part_num_re_cd;
        var quantityInput = $("#quantity" + i);
        var quantityName = counts[i].quantity;
        if (partNumInput.val() != partNumName) {
            partNumInput.val(partNumName);
        }
        if (quantityInput.val() != quantityName) {
            quantityInput.val(quantityName);
        }
    }
}

删除行

/**
 * 删除一行数据
 */
Mechanicalledger.deleteRow = function () {
    var $table = $('#' + this.id);
    var ordeNumbers = $.map($table.bootstrapTable('getSelections'), function (row) {
        return row.order_number;
    })
    $table.bootstrapTable('remove', {
        field: 'order_number',
        values: ordeNumbers
    })
    //将表内数据遍历，在数据修改导致重置后，遍历和表内数据，
    var counts = $table.bootstrapTable('getData');
    for (var i = 0; i < counts.length; i++) {
        var partNumInput = $("#part_num_re_cd" + i);
        var partNumName = counts[i].part_num_re_cd;
        var quantityInput = $("#quantity" + i);
        var quantityName = counts[i].quantity;
        if (partNumInput.val() != partNumName) {
            partNumInput.val(partNumName);
        }
        if (quantityInput.val() != quantityName) {
            quantityInput.val(quantityName);
        }
    }
}