Как добавить свой элемент текстового поля в таблицу?в основной форме детали

Question

Я использую MVC для создания своей формы Master Detail, я попробовал это добавить мою запись данных в, чтобы показать мою запись данных в форме, чтобы при нажатии пользователем кнопки Add данные самой детали отображались в таблице.

JQUERY не работает

Это мой вид: скрипт @section {// указатель даты $ (function () {$ ('# orderDate'). Datepicker ({datepicker: 'mm-dd-yy '});});$ (документ) .ready (function ()

        {
            var orderItems = [];

            //Add Button click function
            $('#add').click(function () {
                //Chk Validation
                var isValidItem = true;
                if ($('#itemName').val().trim() == '') {
                    isValidItem = false;
                    $('#itemName').siblings('span.error').css('visibility', 'vissible')
                }
                else {
                    $('#itemName').siblings('span.error').css('visibility', 'hidden')
                }
                if (!($('#quantity').val().trim() !== '' && !isNaN($('#dvch_nar').val().trim()))) {
                    isValidItem = false;
                    $('#quantity').siblings('span.error').css('visibility', 'vissible')
                }
                else {
                    $('#quantity').siblings('span.error').css('visibility', 'hidden')
                }
                if (!($('#itemName').val().trim() !== '' && !isNaN($('#dvch_cr_amt').val().trim()))) {
                    isValidItem = false;
                    $('#itemName').siblings('span.error').css('visibility', 'vissible')
                }
                else {
                    $('#itemName').siblings('span.error').css('visibility', 'hidden')
                }
                if (!($('#rate').val().trim() !== '' && !isNaN($('#dvch_cr_amt').val().trim()))) {
                    isValidItem = false;
                    $('#rate').siblings('span.error').css('visibility', 'vissible')
                }
                else {
                    $('#rate').siblings('span.error').css('visibility', 'hidden')
                }
                //add item to list if valid
                if (isValidItem) {
                    orderItems.push(
                        {
                            ItemName: $('#itemName').val().trim(),
                            Quantity:parseInt$('#quantity').val().trim(),
                            Rate: parseInt$('#rate').val().trim(),
                            Total: parseInt($('#quantity').val().trim())* parseFloat($('#rate').val().trim())
                        });
                    //clear fields
                    $('#itemName').val('').focus();
                    $('#quantity').val('');
                    $('#rate').val('');
                }
                //populate order item
                GeneratedItemsTable();
            }
            );
            //save button click function
            $('#submit').click(function () {
                //validation order
                var isAllValid = true;
                if(orderItems.length=0)
                {
                    $('#orderItems').html('<span style="color:red;">Please add another item</span>')
                    isAllValid = false;
                }
                if ($('#orderNo').val().trim() == '')
                {
                    $('#orderNo').siblings('span.error').css('visibility', 'visible')
                    isAllValid = false;
                }
                else {
                    $('#orderNo').siblings('span.error').css('visibility', 'hidden')
                }
                if ($('#orderDate').val().trim() == '') {
                    $('#orderDate').siblings('span.error').css('visibility', 'visible')
                    isAllValid = false;
                }
                else {
                    $('#orderDate').siblings('span.error').css('visibility', 'hidden')
                }

                //if ($('')
                //save if valid
                    if (isAllValid){
                        var data={
                            Date: $('#orderNo').val().trim(),
                            Remarks: ('#orderDate').val().trim(),
                            Description:$('description').val().trim(),
                            orderDetails:orderItems
                        }
                    }

                $(this).val("Please Wait...");


                $.ajax(
                    {
                        url: "/Home/SaveOrder",
                        type:"post",
                        data:JSON.stringify(data),
                        dataType:"application/json",
                        success:function(d){
                            //check is successfully save to database
                            if(d.status==true)
                            {
                                //will send status from server side
                                alert('successfully done.');
                                //clear form
                                orderItems=[];
                                $('#orderNo').val('');
                                $('#orderDate').val('');
                                $('#orderItems').empty();
                            }
                            else{
                                alert('Failed');
                            }
                        },
                        error :function(){
                            alert('Error:Please Try again.');
                        }
                    }
                    );


            });


//function for show added item
            function GeneratedItemsTable()
            {
                if(orderItems.length>0)
                {
                    var $table = $('<table/>');
                    $table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>')
                    var $tboday = $('<tbody/>');
                    $.each(orderItems,function(i,val)
                    {
                        var $row=$('<tr/>');
                        $row.append($('<tr/>').html(val.ItemName))
                        $row.append($('<tr/>').html(val.Quantity))
                        $row.append($('<tr/>').html(val.Rate))
                        $row.append($('<tr/>').html(val.Total))
                        $tboday.append($row);
                    });
                    $table.append($tboday);
                    $('#orderItems').html($table);

                    }

                    }
            }

        );
</script>


    }

спасибо за быстрый ответ

Answer 1

Попробуйте это

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    //Date Picker
    $(function () {
        $('#orderDate').datepicker({
            dateFormat : 'mm-dd-yy'
        });
    });

    $(document).ready(function () {
        var orderItems = [];
        //Add button click function
        $('#add').click(function () {
            //Check validation of order item
            var isValidItem = true;
            if ($('#itemName').val().trim() == '') {
                isValidItem = false;
                $('#itemName').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#itemName').siblings('span.error').css('visibility', 'hidden');
            }

            if (!($('#quantity').val().trim() != '' && !isNaN($('#quantity').val().trim()))) {
                isValidItem = false;
                $('#quantity').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#quantity').siblings('span.error').css('visibility', 'hidden');
            }

            if (!($('#rate').val().trim() != '' && !isNaN($('#rate').val().trim()))) {
                isValidItem = false;
                $('#rate').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#rate').siblings('span.error').css('visibility', 'hidden');
            }

            //Add item to list if valid
            if (isValidItem) {
                orderItems.push({
                    ItemName: $('#itemName').val().trim(),
                    Quantity: parseInt($('#quantity').val().trim()),
                    Rate: parseFloat($('#rate').val().trim()),
                    TotalAmount: parseInt($('#quantity').val().trim()) * parseFloat($('#rate').val().trim())
                });

                //Clear fields
                $('#itemName').val('').focus();
                $('#quantity,#rate').val('');

            }
            //populate order items
            GeneratedItemsTable();

        });
        //Save button click function
        $('#submit').click(function () {
            //validation of order
            var isAllValid = true;
            if (orderItems.length == 0) {
                $('#orderItems').html('<span style="color:red;">Please add order items</span>');
                isAllValid = false;
            }

            if ($('#orderNo').val().trim() == '') {
                $('#orderNo').siblings('span.error').css('visibility', 'visible');
                isAllValid = false;
            }
            else {
                $('#orderNo').siblings('span.error').css('visibility', 'hidden');
            }

            if ($('#orderDate').val().trim() == '') {
                $('#orderDate').siblings('span.error').css('visibility', 'visible');
                isAllValid = false;
            }
            else {
                $('#orderDate').siblings('span.error').css('visibility', 'hidden');
            }

            //Save if valid
            if (isAllValid) {
                var data = {
                    OrderNo: $('#orderNo').val().trim(),
                    OrderDate: $('#orderDate').val().trim(),
                    //Sorry forgot to add Description Field
                    Description : $('#description').val().trim(),
                    OrderDetails : orderItems
                }

                $(this).val('Please wait...');

                $.ajax({
                    url: '/Home/SaveOrder',
                    type: "POST",
                    data: JSON.stringify(data),
                    dataType: "JSON",
                    contentType: "application/json",
                    success: function (d) {
                        //check is successfully save to database
                        if (d.status == true) {
                            //will send status from server side
                            alert('Successfully done.');
                            //clear form
                            orderItems = [];
                            $('#orderNo').val('');
                            $('#orderDate').val('');
                            $('#orderItems').empty();
                        }
                        else {
                            alert('Failed');
                        }
                        $('#submit').val('Save');
                    },
                    error: function () {
                        alert('Error. Please try again.');
                        $('#submit').val('Save');
                    }
                });
            }

        });
        //function for show added items in table
        function GeneratedItemsTable() {
            if (orderItems.length > 0)
            {
                var $table = $('<table/>');
                $table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th><th></th></tr></thead>');
                var $tbody = $('<tbody/>');
                $.each(orderItems, function (i, val) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html(val.ItemName));
                    $row.append($('<td/>').html(val.Quantity));
                    $row.append($('<td/>').html(val.Rate));
                    $row.append($('<td/>').html(val.TotalAmount));
                    var $remove = $('<a href="#">Remove</a>');
                    $remove.click(function (e) {
                        e.preventDefault();
                        orderItems.splice(i, 1);
                        GeneratedItemsTable();
                    });
                    $row.append($('<td/>').html($remove));
                    $tbody.append($row);
                });
                console.log("current", orderItems);
                $table.append($tbody);
                $('#orderItems').html($table);
            }
            else {
                $('#orderItems').html('');
            }
        }
    });

</script>