click button and add table row

Question

User1144299848 posted

Hi Folks,

The following code adds a row to the table as I click the mouse, but when i release the mouse button the new row vanishes.

Can anyone help?

$(document).ready(function () {
    $('.btn-info').click(function () {
        var $newRow = $('tr[data-row="0"]').clone().remove('.btn-info');
        $(this).closest('table > tbody').append($newRow);
    });
});

  <table class="table-bordered">
        <tr>
            <td style="width: 50%;">
                <table>
                    <tr>
                        <td colspan="3" style="text-align:center;">
                            <strong>
                                Sacar
                            </strong>
                        </td>
                    </tr>
                    <tr data-row="0">
                        <td style="vertical-align:bottom;">
                            <button id="maisS" name="maisS" class="btn-info form-control" data-row="0">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </td>
                        <td>
                            Conta
                            @Html.DropDownList("conta", (SelectList)ViewBag.conta, "--selecionar--", htmlAttributes: new { @class = "form-control" })
                        </td>
                        <td>
                            Valor
                            <input type="text" class="dinh form-control" id="val" name="val" />
                        </td>
                        <td style="vertical-align:bottom;"></td>
                    </tr>
                </table>                
            </td>
            <td style="width:50%;">
                <table>
                    <tr>
                        <td style="text-align:center;" colspan="3">
                            <strong>
                                Depositar
                            </strong>
                        </td>
                    </tr>
                    <tr data-row="0">
                        <td colspan="2">
                            Conta
                            @Html.DropDownList("conta", (SelectList)ViewBag.conta, "--selecionar--", htmlAttributes: new { @class = "form-control" })
                        </td>
                        <td>
                            Valor
                            <input type="text" class="dinh form-control" id="val" name="val" />
                        </td>
                        <td style="vertical-align:bottom;">
                            <button id="mais" name="mais" class="btn-info form-control" data-row="0">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <br />
    <div>
        <input type="button" class="btn btn-primary" id="btngravar" value="Gravar" />
    </div>
}

<script src="~/Scripts/Financeiro/MovConta.js"></script>

TIA

Moises

Answer 1

User-474980206 posted
You button is doing a submit, which rerenders the page. Change it to a type=“button” so it does not submit, or in the click handler cancel event bubbling.

Answer 2

User1144299848 posted

Yes that is it. many thanks.