Question

我有以下代码将显示为表格。我想按年份通过我的<select id="ano">过滤此内容。

所有这些常量都是表行<tr>。

就是这样，当我选择<option> 2018时，我只想显示为<tr>的那些常量，这些常量在“ Data”变量中包含数字“ 2018”。

P.S：我不想“隐藏”不是“ 2018”的内容。我只想“显示”什么是“ 2018”。

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>

<body >
    <section id="container">


        <div id="select_calendario">
            <div>
                <select id="ano">
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                </select>
            </div>  
        </div>

        <div id="div_calendario_jogos">
            <table id="table_calendario_jogos">
                <tbody>
                    <tr id="table_header">
                        <th>Data</th>
                        <th>Hora</th>
                        <th>Oponente</th>
                        <th>Placar</th>
                        <th>Torneio</th>
                    </tr>
                </tbody>

                <tbody id="tbody_calendario_jogos">         


                </tbody>
            </table>
        </div>
    </section>  

    <script>    
            LSB_2018_JOGO_1: {
                    Data: "11/03/2019",
                    Hora: "15:00",
                    Oponente: "BMC",
                    Placar: "V, 52-42",
                    Torneio: "LSB",
                },

            LSB_2018_JOGO_2: {
                    Data: "08/04/2018",
                    Hora: "12:30",
                    Oponente: "Drink Team",
                    Placar: "D, 59-61",
                    Torneio: "LSB",
                },

            LSB_2018_JOGO_3: {
                            Data: "22/04/2019",
                            Hora: "10:30",
                            Oponente: "Nitcheroy Ballers",
                            Placar: "V, 53-40",
                            Torneio: "LSB",
                        },

            TUC_2018_JOGO_1: {
                            Data: "11/08/2018",
                            Hora: "12:30",
                            Oponente: "Unirio",
                            Placar: "D, 30-60",
                            Torneio: "TUC",
                        },

            TUC_2018_JOGO_2: {
                            Data: "15/09/2019",
                            Hora: "17:10",
                            Oponente: "UFRJ Aecs",
                            Placar: "V, 29-25",
                            Torneio: "TUC",
                        },

            TUC_2018_JOGO_3: {
                            Data: "20/10/2018",
                            Hora: "16:00",
                            Oponente: "UERJ Economia",
                            Placar: "V, 49-30",
                            Torneio: "TUC",
                        }

};


const tbody = document.getElementById('tbody_calendario_jogos');

for (const key in jogos2018) {
  const tr = document.createElement('tr');

  for (const item in jogos2018[key]) {

    const td = document.createElement('td');
      td.textContent = jogos2018[key][item];

      tr.appendChild(td);
  }

  tbody.appendChild(tr);
}
    </script>
</body>
</html>

Answer 1

我不知道要显示的值，所以我只显示了日期：

修改只需添加更多<td>的元素为要检查内显示每一个属性

document.getElementById("ano").addEventListener("change", function(e) { const tbody = document.getElementById('tbody_calendario_jogos') while (tbody.firstChild) { console.log(tbody.firstChild) tbody.removeChild(tbody.firstChild) } for (key in data) { const re = new RegExp(`${e.target.value}`) const isVal = re.exec(data[key].Data) if (isVal != null) { const obj = data[key] const tr = document.createElement('tr') const tdData = document.createElement('td') tdData.textContent = obj.Data const tdHora = document.createElement('td') tdHora.textContent = obj.Hora const tdOponente = document.createElement('td') tdOponente.textContent = obj.Oponente const tdPlacar = document.createElement('td') tdPlacar.textContent = obj.Placar const tdTorneio = document.createElement('td') tdTorneio.textContent = obj.Torneio tr.appendChild(tdData) tr.appendChild(tdHora) tr.appendChild(tdOponente) tr.appendChild(tdPlacar) tr.appendChild(tdTorneio) tbody.appendChild(tr) } } })

编辑2：如果您想要一种更简洁的方法（请注意：此方法中属性的顺序很重要[aka首先显示顶部，bottom最后显示]）替换内容的if (isVal != null) { ... }与：

const obj = data[key] const tr = document.createElement('tr') for (value of Object.values(obj)) { const td = document.createElement('td') td.textContent = value tr.appendChild(td) console.log(value) } tbody.appendChild(tr)

每次select的值更改时（即用户选择一个选项时），都会激活，删除"tbody_calendario_jogos"的所有元素，使用正则表达式按年份过滤正确的对象并显示它们

PS：我组织你的数据到这个的代码工作：

const data = { LSB_2018_JOGO_1: { Data: "11/03/2019", Hora: "15:00", Oponente: "BMC", Placar: "V, 52-42", Torneio: "LSB", }, LSB_2018_JOGO_2: { Data: "08/04/2018", Hora: "12:30", Oponente: "Drink Team", Placar: "D, 59-61", Torneio: "LSB", }, LSB_2018_JOGO_3: { Data: "22/04/2019", Hora: "10:30", Oponente: "Nitcheroy Ballers", Placar: "V, 53-40", Torneio: "LSB", }, TUC_2018_JOGO_1: { Data: "11/08/2018", Hora: "12:30", Oponente: "Unirio", Placar: "D, 30-60", Torneio: "TUC", }, TUC_2018_JOGO_2: { Data: "15/09/2019", Hora: "17:10", Oponente: "UFRJ Aecs", Placar: "V, 29-25", Torneio: "TUC", }, TUC_2018_JOGO_3: { Data: "20/10/2018", Hora: "16:00", Oponente: "UERJ Economia", Placar: "V, 49-30", Torneio: "TUC", } };

如何过滤显示为表格的JavaScript常量？

1 个答案: