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 Fiddle

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/

Jquery乘以输入数值和Json数据

1 个答案: