0

尝试在由引导程序的导航选项卡分隔的多个表中显示 json 内容。我选择通过 FileReader 上传文件(主要是因为不知道将 json 转换为 js 的任何其他方法)。它最初工作正常(使用硬编码表),但是在我上传带有实际信息的 json (并通过 JS 删除硬编码表)后,选项卡不再切换(信息仍然正确显示,但仅在第一个选项卡上)。

我没有收到控制台错误,我很肯定这是一个 JS 问题,因为如果我将更新的(上传后)html 从 Chrome 复制粘贴到 vscode,它会再次完美运行。上传过程中的某些东西破坏了 Bootstrap 的 JS 或阻止它执行,我不知道它是什么。

<div class="row mx-3">
                <div class="col my-3">
                    <ul class="nav nav-tabs" id="lefttabs" role="tablist">
                        <li class="nav-item">
                            <a id="doc-tab" class="nav-link active" data-toggle="tab" href="#doc" role="tab" data-height="true" >gsdfgsfg</a>
                        </li>
                        <li class="nav-item">
                            <a id="stories-tab" class="nav-link" data-toggle="tab" href="#stories" role="tab" data-height="true" >htrhr</a>
                        </li>
                    </ul>
                </div>
                <div class="col my-3 d-flex justify-content-end">
                    <ul class="nav" id="righttabs">
                        <li class="nav-item">
                            <!-- <a class="nav-link" href="#"><input type="file" id="openfile" /></a> -->
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="file">
                                    <label class="custom-file-label" for="file">Choose file</label>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

<div id="tablebody" class="tab-content my-2 mx-3">
                <div class="tab-pane fade show active" id="doc" role="tabpanel">
                    <div class="d-inline-flex">
                        <table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
                            <thead class="text-dark">
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col">First</th>
                                    <th scope="col">Last</th>
                                    <th scope="col">Handle</th>
                                    <th scope="col"><i class="fas fa-plus"></i></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>modal json (1 per project)</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                <tr>
                                    <th scope="row">+</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="stories" role="tabpanel">
                    <div class="d-inline-flex">
                        <table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
                            <thead>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col">First</th>
                                    <th scope="col">Last</th>
                                    <th scope="col">Handle</th>
                                    <th scope="col"><i class="fas fa-plus"></i></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Хочу видеть..</td>
                                    <td>Jersey</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Хочу иметь..</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Хочу понимать..</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                <tr>
                                    <th scope="row">+</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
document.querySelector('#file').addEventListener('change', function() {
    var ready = false;
    var content = [];
    var table = document.querySelectorAll('td');
    var tabs = document.querySelector('#lefttabs');
    var tablebody = document.querySelector('#tablebody');
    var fr = new FileReader();
    fr.readAsText(this.files[0]);
    var check = function() {
        if (ready === true) {
            const schemas = content.data.tableSchemas;
            while (tabs.firstChild) {
                tabs.removeChild(tabs.firstChild);
            }
            while (tablebody.firstChild) {
                tablebody.removeChild(tablebody.firstChild);
            }
            for (var i = 0; i < schemas.length; i++) {
                var navitem = document.createElement('li');
                navitem.className = 'nav-item';
                var tabname = document.createElement('a');
                tabname.setAttribute('id', schemas[i].id + '-tab');
                tabname.className = 'nav-link' + (!i ? ' active' : '');
                tabname.setAttribute('data-toggle', 'tab');
                tabname.setAttribute('href', '#' + schemas[i].id);
                tabname.setAttribute('role', 'tab');
                tabname.setAttribute('data-height', 'true');
                tabname.textContent = schemas[i].name;
                navitem.appendChild(tabname);
                tabs.appendChild(navitem);

                var tab = document.createElement('div');
                tab.setAttribute('id', schemas[i].id);
                tab.className = 'tab-pane fade' + (!i ? ' show active' : '');
                tab.setAttribute('role', 'tabpanel');
                var flex = document.createElement('div');
                flex.className = 'd-inline-flex';
                var grid = document.createElement('table');
                grid.className = 'table table-hover table-hover-cells';
                grid.className += ' table-borderless mt-2 text-secondary';
                grid.textContent = schemas[i].name;
                flex.appendChild(grid);
                tab.appendChild(flex);
                tablebody.appendChild(tab);

            }
            return;
        }
        setTimeout(check, 1000);
    }
    check();
    fr.onload = function() {
        content = JSON.parse(this.result);
        ready = true;
    }

})

示例 json:

{
    "msg": "SUCCESS",
    "data": {
        "tableSchemas": [
            {
                "id": "111111111",
                "name": "7676767676"
            },
            {
                "id": "222222222222",
                "name": "434343434343"
            },
            {
                "id": "33333333333",
                "name": "878787878"
            },
            {
                "id": "44444444444",
                "name": "21212121"
            },
            {
                "id": "555555555",
                "name": "989898989898"
            },
            {
                "id": "666666666666",
                "name": "0909090909"
            },
            {
                "id": "777777777",
                "name": "525252525"
            },
            {
                "id": "888888888888",
                "name": "74747474"
            }
        ]
    }
}

我希望它在上传 json 后仍然能够切换选项卡,但它什么也不做。

jsfiddle

我正在使用 Bootstrap-native。

4

0 回答 0