时间戳

首页 > 解决方案 > 由 DOM javascript 创建的表如何切换一行显示/隐藏？

javascript - 由 DOM javascript 创建的表如何切换一行显示/隐藏？

问题描述

在以下代码中：http: //praytimes.org/code/v2/js/examples/monthly.htm

有祈祷时间我需要显示一个按钮并隐藏一个祈祷时间，因为该表是由 DOM 创建的，它没有类或 ID，所以我不知道如何解决这个问题？

标签： javascriptdomtoggle

解决方案

拥有适当的选择器肯定会让它更容易，但如果这不是一个选项，你总是可以尝试这样的事情。

function setColumnDisplayByHeaderName(name, display) {
        var table = document.getElementById('timetable'),
            headerCells = table.querySelectorAll('.head-row td'),
            header = [];

        for(var i = 0; i < headerCells.length; i++) {
            header.push(headerCells[i].innerText.trim());
        }

        var rows = table.querySelectorAll("tr:not(.head-row)"),
            index = header.indexOf(name);

        if(index === -1) throw new Error("Unknown Header Column");

        for(var i = 0; i < rows.length; i++) {
            rows[i].querySelectorAll('td')[index].style.display = display;
        }

        // Hide header row as well.
        headerCells[index].style.display = display;
    }


    function showOnlyDay(day) {
        var table = document.getElementById('timetable'),
            rows = table.querySelectorAll("tr:not(.head-row)");

        for(var i = 0; i < rows.length; i++) {
            var cells = rows[i].querySelectorAll('td');

            if(cells[0].innerText !== day && day !== null) {
                rows[i].style.display = 'none';
            } else {
                rows[i].style.display = '';
            }
        }
    }


    document.getElementById('toggle-asr').addEventListener('click', function(event) {
        var header = event.target.dataset.header,
            headerCells = document.querySelectorAll('#timetable .head-row td'),
            headerCell;

        for(var i = 0; i < headerCells.length; i++) {
            if(headerCells[i].innerText.trim() === header) {
                headerCell = headerCells[i];
                break;
            }
        }

        var display = headerCell.style.display === 'none' ? '' : 'none';

        setColumnDisplayByHeaderName(header, display);
    });


    document.getElementById('only-day-5').addEventListener('click', function() {
        showOnlyDay('5');
    });


    document.getElementById('show-all').addEventListener('click', function() {
        showOnlyDay(null);
    });
<table id="timetable" class="timetable">
    <tbody>
        <tr class="head-row">
            <td style="width: 2.5em;">Day</td>
            <td style="width: 3.7em;">Fajr</td>
            <td style="width: 3.7em;">Sunrise</td>
            <td style="width: 3.7em;">Dhuhr</td>
            <td style="width: 3.7em;">Asr</td>
            <td style="width: 3.7em;">Maghrib</td>
            <td style="width: 3.7em;">Isha</td>
        </tr>
        <tr class="">
            <td style="width: 2.5em;">1</td>
            <td style="width: 3.7em;">4:13</td>
            <td style="width: 3.7em;">6:11</td>
            <td style="width: 3.7em;">1:26</td>
            <td style="width: 3.7em;">5:24</td>
            <td style="width: 3.7em;">8:41</td>
            <td style="width: 3.7em;">10:31</td>
        </tr>
        <tr class=""><td style="width: 2.5em;">2</td><td style="width: 3.7em;">4:14</td><td style="width: 3.7em;">6:12</td><td style="width: 3.7em;">1:26</td><td style="width: 3.7em;">5:24</td><td style="width: 3.7em;">8:40</td><td style="width: 3.7em;">10:29</td></tr><tr class=""><td style="width: 2.5em;">3</td><td style="width: 3.7em;">4:16</td><td style="width: 3.7em;">6:13</td><td style="width: 3.7em;">1:26</td><td style="width: 3.7em;">5:24</td><td style="width: 3.7em;">8:39</td><td style="width: 3.7em;">10:27</td></tr><tr class=""><td style="width: 2.5em;">4</td><td style="width: 3.7em;">4:18</td><td style="width: 3.7em;">6:14</td><td style="width: 3.7em;">1:26</td><td style="width: 3.7em;">5:23</td><td style="width: 3.7em;">8:38</td><td style="width: 3.7em;">10:26</td></tr><tr class=""><td style="width: 2.5em;">5</td><td style="width: 3.7em;">4:20</td><td style="width: 3.7em;">6:15</td><td style="width: 3.7em;">1:26</td><td style="width: 3.7em;">5:23</td><td style="width: 3.7em;">8:37</td><td style="width: 3.7em;">10:24</td></tr><tr class=""><td style="width: 2.5em;">6</td><td style="width: 3.7em;">4:21</td><td style="width: 3.7em;">6:16</td><td style="width: 3.7em;">1:26</td><td style="width: 3.7em;">5:22</td><td style="width: 3.7em;">8:35</td><td style="width: 3.7em;">10:22</td></tr><tr class=""><td style="width: 2.5em;">7</td><td style="width: 3.7em;">4:23</td><td style="width: 3.7em;">6:17</td><td style="width: 3.7em;">1:26</td><td style="width: 3.7em;">5:21</td><td style="width: 3.7em;">8:34</td><td style="width: 3.7em;">10:20</td></tr><tr class=""><td style="width: 2.5em;">8</td><td style="width: 3.7em;">4:25</td><td style="width: 3.7em;">6:18</td><td style="width: 3.7em;">1:26</td><td style="width: 3.7em;">5:21</td><td style="width: 3.7em;">8:33</td><td style="width: 3.7em;">10:18</td></tr><tr class=""><td style="width: 2.5em;">9</td><td style="width: 3.7em;">4:26</td><td style="width: 3.7em;">6:19</td><td style="width: 3.7em;">1:26</td><td style="width: 3.7em;">5:20</td><td style="width: 3.7em;">8:31</td><td style="width: 3.7em;">10:16</td></tr><tr class=""><td style="width: 2.5em;">10</td><td style="width: 3.7em;">4:28</td><td style="width: 3.7em;">6:20</td><td style="width: 3.7em;">1:25</td><td style="width: 3.7em;">5:20</td><td style="width: 3.7em;">8:30</td><td style="width: 3.7em;">10:14</td></tr><tr class=""><td style="width: 2.5em;">11</td><td style="width: 3.7em;">4:30</td><td style="width: 3.7em;">6:21</td><td style="width: 3.7em;">1:25</td><td style="width: 3.7em;">5:19</td><td style="width: 3.7em;">8:28</td><td style="width: 3.7em;">10:12</td></tr><tr class=""><td style="width: 2.5em;">12</td><td style="width: 3.7em;">4:32</td><td style="width: 3.7em;">6:22</td><td style="width: 3.7em;">1:25</td><td style="width: 3.7em;">5:18</td><td style="width: 3.7em;">8:27</td><td style="width: 3.7em;">10:10</td></tr><tr class=""><td style="width: 2.5em;">13</td><td style="width: 3.7em;">4:33</td><td style="width: 3.7em;">6:24</td><td style="width: 3.7em;">1:25</td><td style="width: 3.7em;">5:18</td><td style="width: 3.7em;">8:26</td><td style="width: 3.7em;">10:08</td></tr><tr class=""><td style="width: 2.5em;">14</td><td style="width: 3.7em;">4:35</td><td style="width: 3.7em;">6:25</td><td style="width: 3.7em;">1:25</td><td style="width: 3.7em;">5:17</td><td style="width: 3.7em;">8:24</td><td style="width: 3.7em;">10:06</td></tr><tr class=""><td style="width: 2.5em;">15</td><td style="width: 3.7em;">4:37</td><td style="width: 3.7em;">6:26</td><td style="width: 3.7em;">1:25</td><td style="width: 3.7em;">5:16</td><td style="width: 3.7em;">8:23</td><td style="width: 3.7em;">10:04</td></tr><tr class=""><td style="width: 2.5em;">16</td><td style="width: 3.7em;">4:38</td><td style="width: 3.7em;">6:27</td><td style="width: 3.7em;">1:24</td><td style="width: 3.7em;">5:16</td><td style="width: 3.7em;">8:21</td><td style="width: 3.7em;">10:02</td></tr><tr class=""><td style="width: 2.5em;">17</td><td style="width: 3.7em;">4:40</td><td style="width: 3.7em;">6:28</td><td style="width: 3.7em;">1:24</td><td style="width: 3.7em;">5:15</td><td style="width: 3.7em;">8:20</td><td style="width: 3.7em;">10:00</td></tr><tr class=""><td style="width: 2.5em;">18</td><td style="width: 3.7em;">4:41</td><td style="width: 3.7em;">6:29</td><td style="width: 3.7em;">1:24</td><td style="width: 3.7em;">5:14</td><td style="width: 3.7em;">8:18</td><td style="width: 3.7em;">9:58</td></tr><tr class=""><td style="width: 2.5em;">19</td><td style="width: 3.7em;">4:43</td><td style="width: 3.7em;">6:30</td><td style="width: 3.7em;">1:24</td><td style="width: 3.7em;">5:13</td><td style="width: 3.7em;">8:17</td><td style="width: 3.7em;">9:56</td></tr><tr class=""><td style="width: 2.5em;">20</td><td style="width: 3.7em;">4:45</td><td style="width: 3.7em;">6:31</td><td style="width: 3.7em;">1:23</td><td style="width: 3.7em;">5:13</td><td style="width: 3.7em;">8:15</td><td style="width: 3.7em;">9:54</td></tr><tr class=""><td style="width: 2.5em;">21</td><td style="width: 3.7em;">4:46</td><td style="width: 3.7em;">6:32</td><td style="width: 3.7em;">1:23</td><td style="width: 3.7em;">5:12</td><td style="width: 3.7em;">8:13</td><td style="width: 3.7em;">9:52</td></tr><tr class=""><td style="width: 2.5em;">22</td><td style="width: 3.7em;">4:48</td><td style="width: 3.7em;">6:33</td><td style="width: 3.7em;">1:23</td><td style="width: 3.7em;">5:11</td><td style="width: 3.7em;">8:12</td><td style="width: 3.7em;">9:50</td></tr><tr class="today-row"><td style="width: 2.5em;">23</td><td style="width: 3.7em;">4:49</td><td style="width: 3.7em;">6:34</td><td style="width: 3.7em;">1:23</td><td style="width: 3.7em;">5:10</td><td style="width: 3.7em;">8:10</td><td style="width: 3.7em;">9:48</td></tr><tr class=""><td style="width: 2.5em;">24</td><td style="width: 3.7em;">4:51</td><td style="width: 3.7em;">6:36</td><td style="width: 3.7em;">1:22</td><td style="width: 3.7em;">5:09</td><td style="width: 3.7em;">8:09</td><td style="width: 3.7em;">9:46</td></tr><tr class=""><td style="width: 2.5em;">25</td><td style="width: 3.7em;">4:53</td><td style="width: 3.7em;">6:37</td><td style="width: 3.7em;">1:22</td><td style="width: 3.7em;">5:08</td><td style="width: 3.7em;">8:07</td><td style="width: 3.7em;">9:44</td></tr><tr class=""><td style="width: 2.5em;">26</td><td style="width: 3.7em;">4:54</td><td style="width: 3.7em;">6:38</td><td style="width: 3.7em;">1:22</td><td style="width: 3.7em;">5:07</td><td style="width: 3.7em;">8:05</td><td style="width: 3.7em;">9:42</td></tr><tr class=""><td style="width: 2.5em;">27</td><td style="width: 3.7em;">4:56</td><td style="width: 3.7em;">6:39</td><td style="width: 3.7em;">1:22</td><td style="width: 3.7em;">5:07</td><td style="width: 3.7em;">8:04</td><td style="width: 3.7em;">9:40</td></tr><tr class=""><td style="width: 2.5em;">28</td><td style="width: 3.7em;">4:57</td><td style="width: 3.7em;">6:40</td><td style="width: 3.7em;">1:21</td><td style="width: 3.7em;">5:06</td><td style="width: 3.7em;">8:02</td><td style="width: 3.7em;">9:38</td></tr><tr class=""><td style="width: 2.5em;">29</td><td style="width: 3.7em;">4:59</td><td style="width: 3.7em;">6:41</td><td style="width: 3.7em;">1:21</td><td style="width: 3.7em;">5:05</td><td style="width: 3.7em;">8:00</td><td style="width: 3.7em;">9:36</td></tr><tr class=""><td style="width: 2.5em;">30</td><td style="width: 3.7em;">5:00</td><td style="width: 3.7em;">6:42</td><td style="width: 3.7em;">1:21</td><td style="width: 3.7em;">5:04</td><td style="width: 3.7em;">7:59</td><td style="width: 3.7em;">9:34</td></tr><tr class=""><td style="width: 2.5em;">31</td><td style="width: 3.7em;">5:02</td><td style="width: 3.7em;">6:43</td><td style="width: 3.7em;">1:20</td><td style="width: 3.7em;">5:03</td><td style="width: 3.7em;">7:57</td><td style="width: 3.7em;">9:32</td></tr></tbody></table>

<hr>

<button id="toggle-asr" type="button" data-header="Asr">Toggle ASR</button>
<button id="only-day-5" type="button" data-header="Asr">Show Only Day 5</button>
<button id="show-all" type="button" data-header="Asr">Show All</button>

我已经包含了两个功能。setColumnDisplayByHeaderName(name, display) 通过列名设置列的显示属性。因此，如果您将“Asr”传递给它，它将隐藏 Asr 列。接下来是函数 showOnlyDay(day)。它将一天作为一个字符串，并隐藏除那一天之外的任何其他行。您还可以传递 null 以取消隐藏所有行。

我通过检查每一行的单元格中的文本来完成此操作。它不像 css 选择器那样干净，但它可以工作。希望这可以帮助。

推荐阅读