jQuery將輸入數字值和JSON數據相乘

Question

我有一個時間計算工具，您可以在下面的小提琴鏈接中找到。 一旦有人選擇了平台，任務類型，組件和單位數量，應將輸入的單位數量乘以所選的組件值，並將其顯示在下表中。 我設法獲得了所有填充的值，但是無法進行數學運算。 我嘗試了幾次嘗試，但是沒有用。

var myJson = {
"platforms": [
    {
        "name": "Sitecore",
        "id": "sitecore",
        "tasktype": [
            {
                "name": "Promobox",
                "id": "promobox",
                "components": [
                    {
                        "name": "Accordion",
                        "id": "accordion",
                        "time": "20"
                    },
                    {
                        "name": "Box 1",
                        "id": "box1",
                        "time": "30"
                    }
                ]
            },
            {
                "name": "Video",
                "id": "video",
                "components": [
                    {
                        "name": "Box 2",
                        "id": "box2",
                        "time": "25"
                    },
                    {
                        "name": "Box 3",
                        "id": "box3",
                        "time": "30"
                    }
                ]
            }
        ]
    },
    {
        "name": "Siab",
        "id": "siab",
        "tasktype": [
            {
                "name": "Newswire",
                "id": "newswire",
                "components": [
                    {
                        "name": "Box 4",
                        "id": "box5",
                        "time": "50"
                    },
                    {
                        "name": "Box 5",
                        "id": "box5",
                        "time": "40"
                    }
                ]
            },
            {
                "name": "Task Type New",
                "id": "tasktypenew",
                "components": [
                    {
                        "name": "Box 6",
                        "id": "box6",
                        "time": "20"
                    },
                    {
                        "name": "Box 7",
                        "id": "box7",
                        "time": "100"
                    }
                ]
            }
        ]
    }
]
};



$.each(myJson.platforms, function (index, value) {
var platform_id;
var tasktype_id;
var component_id;

$("#platform").append('<option rel="' + index + '" value="' + value.id + '">'     + value.name + '</option>');

$("#platform").change(function () {
    $("#tasktype, #component").find("option:gt(0)").remove();
    $("#tasktype").find("option:first").text("Loading...");

    platform_id = $(this).find('option:selected').attr('rel');

    $.each(myJson.platforms[platform_id].tasktype, function (index1, value1) {
        $("#tasktype").find("option:first").text("Select Task Type");
        $("#tasktype").append('<option rel="' + index1 + '" value="' +     value1.id + '">' + value1.name + '</option>');
    });

});


$("#tasktype").change(function () {
    $("#component").find("option:gt(0)").remove();
    $("#component").find("option:first").text("Loading...");

    tasktype_id = $(this).find('option:selected').attr('rel');

    $.each(myJson.platforms[platform_id].tasktype[tasktype_id].components,     function (index2, value2) {
        $("#component").find("option:first").text("Select Component");
        $("#component").append('<option rel="' + index2 + '" value="' +      value2.time + '">' + value2.name + '</option>');
    });


});


});


$(document).ready(function () {
    $('#calculate').click(function () {
    $('#calc input, #calc select').each(
        function (index) {
        var input = $(this);
        $('#data tbody').append('<tr><td>' + input.val() + '</td></tr>');
        });
    });
});

JS小提琴

Answer 1

好的，這需要很多調試。 您在建立表格時出錯，並且無法正確存儲數據。 整個捕魚過程都存在問題。 這是調試的計算器：

$(document).ready(function () {
        $('#calculate').click(function () {
        let tr = $("<tr/>").appendTo("#data tbody");
        console.log(tr);
                $('#calc input, #calc select').each( function (index) {
                    console.log($(this));
                    var input = $(this);
                    $(tr).append('<td class=row-'+ $(input).attr("id") + '>' + input.val() + '</td>');
            });

            const componentFactor = $(tr).children(".row-component").text();
            const units = $(tr).children(".row-units").text();
            const total = componentFactor*units;

            $(tr).append('<td>' + total + '</td>');
        });
    });

注意：

• 更改表結構格式。
• 現在每次都將td附加到單個tr上，以維持表行的一致性。
• 通過向每個td添加類別標簽標識符來從行中捕獲數據
• 顯示結果。

更新小提琴鏈接： https : //jsfiddle.net/x4rLuf88/1/