Skip to main content
se añadieron 119 caracteres en el cuerpo
Origen Enlace
$(document).ready(function () {
    $("#nuevoServicio").click(function () {
        var tableReg = document.getElementById("tablaserviciosprest");
        $("#tablaserviciosprest").append("<tr>" + tableReg.rows[1].innerHTML + "</tr>");

        $('.eliminalinea').off().click(function (e) {
            $(this).parent('td').parent('tr').remove();        });
        addcambios()
    });
    addcambios()
});

function addcambios() {
    //token
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    //tokenn

    function parseFloatHTML(element) {
        return parseFloat(element.innerHTML.replace(/[^\d\.\-]+/g, '')) || 0;
    }

    function parsePrice(number) {
        return number.toFixed(2).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1,');
    }

    function updateNumber(e) {
        console.log(document.activeElement);
        var
            activeElement = document.activeElement,

            value = parseFloat(activeElement.innerHTML),
            wasPrice = activeElement.innerHTML == parsePrice(parseFloatHTML(activeElement));

        if (!isNaN(value) && (e.keyCode == 38 || e.keyCode == 40 || e.wheelDeltaY)) {
            e.preventDefault();

            value += e.keyCode == 38 ? 1 : e.keyCode == 40 ? -1 : Math.round(e.wheelDelta * 0.025);
            value = Math.max(value, 0);

            activeElement.innerHTML = wasPrice ? parsePrice(value) : value;
        } 


document.addEventListener('mousewheel', updateNumber);
document.addEventListener('keyup', updateNumber);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form role="form" action="" method="post" class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Adicionar Servicio Prestado</h3>
    </div>
    <div class="modal-body ">

        <div class="panel panel-default ">
            <div class="panel-body 2">
                <div class="form-group">
                    <label for="areaSP" class="control-label col-lg-1">Área*:</label>
                    <div class="col-lg-4">
                        <select class="form-control" id="areaSP" name="areaT">
                            <option value="">Seleccione Área ...</option>
                            {% for area in area_List %}
                                <option value="{{ area.pk }}">{{ area.area }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clienteSP" class="control-label col-lg-1">Cliente*:</label>
                    <div class="col-lg-6">
                        <select class="form-control" id="clienteSP" name="areaT">
                            <option value="">Seleccione Cliente ...</option>
                            {% for cliente in cliente_List %}
                                <option value="{{ cliente.pk }}">{{ cliente.nombreEmp }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="carnetI" class="control-label col-lg-2">Servicios Prestados*:</label>
                    <div class="col-xs-offset-1 col-lg-11">
                        <table class="table table-bordered" id="tablaserviciosprest">
                            <thead>
                            <tr>
                                <th>Área</th>
                                <th>Servicio</th>
                                <th>Precio CUP</th>
                                <th>Precio CUC</th>
                                <th>Precio Total</th>
                                <th>Cantidad</th>
                                <th>Costo Total</th>
                                <th>Opciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr style="display:none; ">
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled="">
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4">
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled>
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP[]" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC[]" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal[]" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad[]" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal[]" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4" disabled>
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <button type="button" id="nuevoServicio" class="btn btn-danger nuevoServicio">Nuevo Servicio
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="porCobrar" class="control-label col-lg-2">Por Cobrar:</label>
                    <div class="checkbox col-lg-7">
                        <input id="porCobrar" name="porCobrar" type="checkbox" checked>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="col-lg-12 text-right">
            <button type="submit" class="btn btn-primary" name="submit">Guardar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
    </div>
</form>
$(document).ready(function () {
    $("#nuevoServicio").click(function () {
        var tableReg = document.getElementById("tablaserviciosprest");
        $("#tablaserviciosprest").append("<tr>" + tableReg.rows[1].innerHTML + "</tr>");

        $('.eliminalinea').off().click(function (e) {
            $(this).parent('td').parent('tr').remove();        });
        addcambios()
    });
    addcambios()
});

function addcambios() {
    //token
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    //tokenn

    function parseFloatHTML(element) {
        return parseFloat(element.innerHTML.replace(/[^\d\.\-]+/g, '')) || 0;
    }

    function parsePrice(number) {
        return number.toFixed(2).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1,');
    }

    function updateNumber(e) {
        console.log(document.activeElement);
        var
            activeElement = document.activeElement,

            value = parseFloat(activeElement.innerHTML),
            wasPrice = activeElement.innerHTML == parsePrice(parseFloatHTML(activeElement));

        if (!isNaN(value) && (e.keyCode == 38 || e.keyCode == 40 || e.wheelDeltaY)) {
            e.preventDefault();

            value += e.keyCode == 38 ? 1 : e.keyCode == 40 ? -1 : Math.round(e.wheelDelta * 0.025);
            value = Math.max(value, 0);

            activeElement.innerHTML = wasPrice ? parsePrice(value) : value;
        }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form role="form" action="" method="post" class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Adicionar Servicio Prestado</h3>
    </div>
    <div class="modal-body ">

        <div class="panel panel-default ">
            <div class="panel-body 2">
                <div class="form-group">
                    <label for="areaSP" class="control-label col-lg-1">Área*:</label>
                    <div class="col-lg-4">
                        <select class="form-control" id="areaSP" name="areaT">
                            <option value="">Seleccione Área ...</option>
                            {% for area in area_List %}
                                <option value="{{ area.pk }}">{{ area.area }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clienteSP" class="control-label col-lg-1">Cliente*:</label>
                    <div class="col-lg-6">
                        <select class="form-control" id="clienteSP" name="areaT">
                            <option value="">Seleccione Cliente ...</option>
                            {% for cliente in cliente_List %}
                                <option value="{{ cliente.pk }}">{{ cliente.nombreEmp }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="carnetI" class="control-label col-lg-2">Servicios Prestados*:</label>
                    <div class="col-xs-offset-1 col-lg-11">
                        <table class="table table-bordered" id="tablaserviciosprest">
                            <thead>
                            <tr>
                                <th>Área</th>
                                <th>Servicio</th>
                                <th>Precio CUP</th>
                                <th>Precio CUC</th>
                                <th>Precio Total</th>
                                <th>Cantidad</th>
                                <th>Costo Total</th>
                                <th>Opciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr style="display:none; ">
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled="">
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4">
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled>
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP[]" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC[]" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal[]" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad[]" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal[]" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4" disabled>
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <button type="button" id="nuevoServicio" class="btn btn-danger nuevoServicio">Nuevo Servicio
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="porCobrar" class="control-label col-lg-2">Por Cobrar:</label>
                    <div class="checkbox col-lg-7">
                        <input id="porCobrar" name="porCobrar" type="checkbox" checked>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="col-lg-12 text-right">
            <button type="submit" class="btn btn-primary" name="submit">Guardar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
    </div>
</form>
$(document).ready(function () {
    $("#nuevoServicio").click(function () {
        var tableReg = document.getElementById("tablaserviciosprest");
        $("#tablaserviciosprest").append("<tr>" + tableReg.rows[1].innerHTML + "</tr>");

        $('.eliminalinea').off().click(function (e) {
            $(this).parent('td').parent('tr').remove();        });
        addcambios()
    });
    addcambios()
});

function addcambios() {
    //token
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    //tokenn

    function parseFloatHTML(element) {
        return parseFloat(element.innerHTML.replace(/[^\d\.\-]+/g, '')) || 0;
    }

    function parsePrice(number) {
        return number.toFixed(2).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1,');
    }

    function updateNumber(e) {
        console.log(document.activeElement);
        var
            activeElement = document.activeElement,

            value = parseFloat(activeElement.innerHTML),
            wasPrice = activeElement.innerHTML == parsePrice(parseFloatHTML(activeElement));

        if (!isNaN(value) && (e.keyCode == 38 || e.keyCode == 40 || e.wheelDeltaY)) {
            e.preventDefault();

            value += e.keyCode == 38 ? 1 : e.keyCode == 40 ? -1 : Math.round(e.wheelDelta * 0.025);
            value = Math.max(value, 0);

            activeElement.innerHTML = wasPrice ? parsePrice(value) : value;
        } 


document.addEventListener('mousewheel', updateNumber);
document.addEventListener('keyup', updateNumber);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form role="form" action="" method="post" class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Adicionar Servicio Prestado</h3>
    </div>
    <div class="modal-body ">

        <div class="panel panel-default ">
            <div class="panel-body 2">
                <div class="form-group">
                    <label for="areaSP" class="control-label col-lg-1">Área*:</label>
                    <div class="col-lg-4">
                        <select class="form-control" id="areaSP" name="areaT">
                            <option value="">Seleccione Área ...</option>
                            {% for area in area_List %}
                                <option value="{{ area.pk }}">{{ area.area }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clienteSP" class="control-label col-lg-1">Cliente*:</label>
                    <div class="col-lg-6">
                        <select class="form-control" id="clienteSP" name="areaT">
                            <option value="">Seleccione Cliente ...</option>
                            {% for cliente in cliente_List %}
                                <option value="{{ cliente.pk }}">{{ cliente.nombreEmp }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="carnetI" class="control-label col-lg-2">Servicios Prestados*:</label>
                    <div class="col-xs-offset-1 col-lg-11">
                        <table class="table table-bordered" id="tablaserviciosprest">
                            <thead>
                            <tr>
                                <th>Área</th>
                                <th>Servicio</th>
                                <th>Precio CUP</th>
                                <th>Precio CUC</th>
                                <th>Precio Total</th>
                                <th>Cantidad</th>
                                <th>Costo Total</th>
                                <th>Opciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr style="display:none; ">
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled="">
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4">
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled>
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP[]" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC[]" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal[]" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad[]" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal[]" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4" disabled>
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <button type="button" id="nuevoServicio" class="btn btn-danger nuevoServicio">Nuevo Servicio
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="porCobrar" class="control-label col-lg-2">Por Cobrar:</label>
                    <div class="checkbox col-lg-7">
                        <input id="porCobrar" name="porCobrar" type="checkbox" checked>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="col-lg-12 text-right">
            <button type="submit" class="btn btn-primary" name="submit">Guardar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
    </div>
</form>
Origen Enlace

Problemas con activeElement

estoy tratando de convertir los valores de los input que son numeros en decimales pero la funcion activeElement no me obtiene los valores del input activo y me da un error, espero que me puedan ayudar o sujerirme otro modo de hacerlo,

$(document).ready(function () {
    $("#nuevoServicio").click(function () {
        var tableReg = document.getElementById("tablaserviciosprest");
        $("#tablaserviciosprest").append("<tr>" + tableReg.rows[1].innerHTML + "</tr>");

        $('.eliminalinea').off().click(function (e) {
            $(this).parent('td').parent('tr').remove();        });
        addcambios()
    });
    addcambios()
});

function addcambios() {
    //token
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    //tokenn

    function parseFloatHTML(element) {
        return parseFloat(element.innerHTML.replace(/[^\d\.\-]+/g, '')) || 0;
    }

    function parsePrice(number) {
        return number.toFixed(2).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1,');
    }

    function updateNumber(e) {
        console.log(document.activeElement);
        var
            activeElement = document.activeElement,

            value = parseFloat(activeElement.innerHTML),
            wasPrice = activeElement.innerHTML == parsePrice(parseFloatHTML(activeElement));

        if (!isNaN(value) && (e.keyCode == 38 || e.keyCode == 40 || e.wheelDeltaY)) {
            e.preventDefault();

            value += e.keyCode == 38 ? 1 : e.keyCode == 40 ? -1 : Math.round(e.wheelDelta * 0.025);
            value = Math.max(value, 0);

            activeElement.innerHTML = wasPrice ? parsePrice(value) : value;
        }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form role="form" action="" method="post" class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Adicionar Servicio Prestado</h3>
    </div>
    <div class="modal-body ">

        <div class="panel panel-default ">
            <div class="panel-body 2">
                <div class="form-group">
                    <label for="areaSP" class="control-label col-lg-1">Área*:</label>
                    <div class="col-lg-4">
                        <select class="form-control" id="areaSP" name="areaT">
                            <option value="">Seleccione Área ...</option>
                            {% for area in area_List %}
                                <option value="{{ area.pk }}">{{ area.area }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clienteSP" class="control-label col-lg-1">Cliente*:</label>
                    <div class="col-lg-6">
                        <select class="form-control" id="clienteSP" name="areaT">
                            <option value="">Seleccione Cliente ...</option>
                            {% for cliente in cliente_List %}
                                <option value="{{ cliente.pk }}">{{ cliente.nombreEmp }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="carnetI" class="control-label col-lg-2">Servicios Prestados*:</label>
                    <div class="col-xs-offset-1 col-lg-11">
                        <table class="table table-bordered" id="tablaserviciosprest">
                            <thead>
                            <tr>
                                <th>Área</th>
                                <th>Servicio</th>
                                <th>Precio CUP</th>
                                <th>Precio CUC</th>
                                <th>Precio Total</th>
                                <th>Cantidad</th>
                                <th>Costo Total</th>
                                <th>Opciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr style="display:none; ">
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled="">
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4">
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled>
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP[]" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC[]" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal[]" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad[]" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal[]" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4" disabled>
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <button type="button" id="nuevoServicio" class="btn btn-danger nuevoServicio">Nuevo Servicio
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="porCobrar" class="control-label col-lg-2">Por Cobrar:</label>
                    <div class="checkbox col-lg-7">
                        <input id="porCobrar" name="porCobrar" type="checkbox" checked>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="col-lg-12 text-right">
            <button type="submit" class="btn btn-primary" name="submit">Guardar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
    </div>
</form>