Question

我使用jquery处理表，对我自己来说，我的任务是在此表上显示字典数据。

例如，我有这样的数组：

var mokData = [
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' }
];

我从这个数组中排序蚂蚁，以获取表中的数据，但是我需要构建表依赖于将从服务器接收的数据。

function pushDataToTable(data, value) {
    $.each(data, function (key, val) {
        if (val.category === value) {
            var tr = '<tr>';
            tr += '<td>' + (key + 1) + '</td>';
            tr += '<td>' + val.id + '</td>';
            tr += '<td>' + val.name + '</td>';
            tr += '<td><button class="chose" data-key="' + (key + 1) + '">Chose</button></td>';
            tr += '</tr>';
            $('tbody').append(tr);
           } else {
            console.error("Error");
        }

    });

    $('button.chose').on('click', function () {
        var cRow = $(this).parents('tr');
        var cId = $('td:nth-child(2)', cRow).text();
        var intKey = $(this).data('key');

        cRow.fadeIn('slow', function () {
            doChose(cId, intKey);
        });
    });

    function doChose(param1, param2) {
        alert('Data with\n\nID: [' + param1 + ']\nKey: [' + param2 + ']');
    }
}

$(document).ready(function () {
    $(".categoryLink").on("click", function () {
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        var href = $("a", this).attr('href');
        getValueFromHref(href)
    });
});

function getValueFromHref(value) {
    var test = value.replace("#", "")
    pushDataToTable(mokData, test);
}

您如何查看我的JS代码，我从中将数据解析为表格，但出现了问题。

我的页面上有类别导航。

代码：

$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');

$('.category_item').click(function () {
    var catProduct = $(this).attr('category');
    console.log(catProduct);

    $('.category_item').removeClass('ct_item-active');
    $(this).addClass('ct_item-active');

    $('.product-item').css('transform', 'scale(0)');
    function hideProduct() {
        $('.product-item').hide();
    } setTimeout(hideProduct, 400);

    function showProduct() {
        $('.product-item[category="' + catProduct + '"]').show();
        $('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
    } setTimeout(showProduct, 400);
});
});

在此类别中，取决于按钮的单击情况，我将更改表中的数据。

数据已排序。 但是上表中没有明确的值。

我的HTML代码：

<div class="container">
<div class="row">
    <div class="col-4">
        <h1>Down time registration</h1>
        <div class="wrap">
            <div class="store-wrapper">
                <div class="category_list" id="test">
                    <a href="#" class="category_item" category="Technical">Technical</a>
                    <a href="#" class="category_item" category="Organizational">Organizational</a>
                    <a href="#" class="category_item" category="Operator">Operator</a>
                    <a href="#" class="category_item" category="Other">Other</a>
                </div>
                <div class="container2">
                    <div class="section2">
                        <div class="scrollable-content content">
                            <section class="products-list">
                                <div class="product-item" category="Technical">
                                    <img src="~/images/udtIcon/equ.png" alt="">
                                    <div class="categoryLink"><a href="#Equipment">Equipment</a></div>
                                </div>
                                <div class="product-item" category="Technical">
                                    <img src="~/images/udtIcon/tool.png" alt="">
                                    <div class="categoryLink"><a href="#Tool">Tool</a></div>
                                </div>
                                <div class="product-item" category="Technical">
                                    <img src="~/images/udtIcon/tool.png" alt="">
                                    <div class="categoryLink"><a href="#Tool">Tool</a></div>
                                </div>

                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="col-8" id="listItems">
            <div id="scrolltable">
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Code</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

和CSS：

wrap {
    max-width: 1100px;
    width: 100%;
    margin: 5px;
}

    .wrap > h1 {
        color: #494B4D;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 15px 0px;
    }

        .wrap > h1:after {
            content: '';
            width: 100%;
            height: 1px;
            background: #C7C7C7;
            margin: 20px 0;
        }

.store-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.category_list {
    display: flex;
    flex-direction: column;
    width: 30%;
}

    .category_list .category_item {
        display: block;
        width: 100%;
        padding: 15px 0;
        margin-bottom: 20px;
        background: #E84C3D;
        text-align: center;
        text-decoration: none;
        color: #fff;
    }

    .category_list .ct_item-active {
        background: #2D3E50;
    }

.products-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}


    .products-list .product-item {
        width: 40%;
        margin-left: 3%;
        margin-bottom: 25px;
        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: flex-start;
        transition: all .4s;
        display: none;
    }

        .products-list .product-item img {
            width: 100%;
        }

        .products-list .product-item a {
            display: block;
            width: 100%;
            padding: 8px 0;
            background: #2D3E50;
            color: #fff;
            text-align: center;
            text-decoration: none;
        }
.container2 {
    width: 70%;
    height: 400px;
    display: flex;
}

.section2 {

    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* for Firefox */
    min-height: 0;
}

.content {
    padding: 2px;
}

.scrollable-content {
    flex-grow: 1;
    overflow: auto;
    min-height: 0;
}

因此，结论是，我在从类别列表中选择新类别后尚不清楚字典数组的问题。

Answer 1

您的代码中有一些错字。我已经用您上面发布的代码创建了一个小提琴，将其清理并进行了一些小改动，它似乎可以按您的要求工作。

我清理了一些html（添加了缺少div标签）更改行：
```
<tbody></tbody>
```

对此

<tbody id="tableResults"></tbody>

在函数开始时，我添加了以下内容：

$("#tableResults").html('');

在重建表之前将其清除。

然后添加

$("#tableResults").append(tr);
//$('tbody').append(tr);

这将建立您的新表

View the fiddle here

具有类别列表

1 个答案: