Supongamos que seleccionamos la fila en la vista de cuadrícula y luego obtenemos el número de la vista de cuadrícula. Supongamos que obtenemos 8 números de gridview y luego cómo agregar las ocho filas en la tabla html con cuadros de texto. ¿Es posible y cómo se usa con jquery .append ()? Gracias de antemano.

0
sarode111 14 dic. 2016 a las 06:24

2 respuestas

La mejor respuesta

Aquí hay un ejemplo completo para agregar fila y eliminar fila:

<!DOCTYPE html>
<html>
<head>
<title>Add / Remove Row</title>
<link rel="stylesheet" type="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" 
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".btn-add").on('click', function() {
            var singleRow = $(".singleRow").eq(0).clone();

            singleRow.find('.btn-add')
                .removeClass('btn-succcess')
                .addClass('btn-danger')
                .removeClass('btn-add')
                .addClass('remove')
                .html("X");

            singleRow.find('input').each(function(i, input) {
                $(input).val('');
            });

            $("#wrapper").append(singleRow);
        });

        $(document).on('click', ".remove", function() {
            $(this).parent().remove();
        });
    });
</script>
<style type="text/css">
    .singleRow {
        padding: 10px 0;
    }
</style>
</head>

<body>
    <div class="container">
    <form role="form" autocomplete="off" id="wrapper">
        <div class="row singleRow">
            <div class="col-md-3">
                <input class="form-control" name="name[]" type="text">
            </div>
            <div class="col-md-3">
                <input class="form-control" name="phone[]" type="text">
            </div>
            <div class="col-md-1">
                <select name="opt[]" class="form-control">
                    <option>1</option>
                    <option>2</option>
                </select>
            </div>
            <button type="button" class="btn btn-success btn-add">
                +
            </button>
        </div>
    </form>
    </div>
</body>    
</html>
-1
Hasib Kamal 22 sep. 2018 a las 09:08

No estoy seguro de haber entendido la pregunta correctamente, pero sí es posible y muy simple con jquery. Su secuencia de comandos debería verse así:

function appendTable(numberOfRows) {
        var row = '<tr><td><input type="text" class="yourInput"></td></tr>'; //you should change this for your needs
        for (var i = 0; i < numberOfRows; i++) {
            $('#yourTable').append(row);
        }
    }
4
Mansur Anorboev 14 dic. 2016 a las 05:17