Почему моя функция поиска работает только в некоторых столбцах моей таблицы Boostrap?

Question

Я настроил функцию js, чтобы позволить мне искать в моей таблице Boostrap, но эта функция работает только в двух ее столбцах.

Я немного новичок в Javascript, так что, хотя яЯ могу выбрать столбцы для поиска, я не могу выбрать их все.Я также должен подчеркнуть, что эту функцию я использовал вначале в таблице Boostrap, где мне нужно было искать только некоторые столбцы.

Это мой HTML:

<section class="main">
    <table id="maintable">
        <thead class="maintable-header">
            <tr>                                           
                <th scope="col" style="width: 5%" class="number"></th>
                <th scope="col" style="width: 17.5%" class="role">Role</th>
                <th scope="col" style="width: 35%" class="project">Project</th>
                <th scope="col" style="width: 35%" class="credits">Credits</th>
                <th scope="col" style="width: 7.5%" class="year">Year</th>
            </tr>
        </thead>



        <tbody id="mainTableBody">

<!-- ########################### ROW 4 ########################### -->
                <td style="padding-left: 0.5%;">4</td>
                <td>Project Management</td>
                <td>Fragile?</td>
                <td>Pentagram Stiftung</td>
                <td>2013</td>
            </tr>
            <tr class="projectinfo" id="projectinfo4">
                <td></td>
                <td class="align-text-top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</td>
                <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td></td>
                <td></td>
            </tr>

<!-- ########################### ROW 5 ########################### -->
            <tr class="rowheader" id="rowheader5">         
                <td style="padding-left: 0.5%;">5</td>
                <td>Project Management</td>
                <td>Fragile?</td>
                <td>Pentagram Stiftung</td>
                <td>2013</td>
            </tr>
            <tr class="projectinfo" id="projectinfo5">
                <td></td>
                <td class="align-text-top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</td>
                <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td></td>
                <td></td>
            </tr>

<!-- ########################### ROW 6 ########################### -->

            <tr class="rowheader" id="rowheader6">         
                <td style="padding-left: 0.5%;">6</td>
                <td>Curating</td>
                <td>The Book Affair</td>
                <td>Automatic Books</td>
                <td>2009</td>
            </tr>
            <tr class="projectinfo" id="projectinfo6" style="height: 50px;">
                <td></td>
                <td class="align-text-top">Lorem ipsum dolor sit amet consectetur adipisicing elit.</td>
                <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
                <td></td>
                <td></td>
            </tr>

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

И этомоя функция:

function searchFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("mainTableBody");
  entries = table.getElementsByTagName("tr");

  for (i = 0; i < entries.length; i++) {
    a = entries[i].getElementsByTagName("td")[0];
    b = entries[i].getElementsByTagName("td")[2];
    //console.log(a, b);
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1 || 
b.innerHTML.toUpperCase().indexOf(filter) > -1) {
      entries[i].style.display = "";
    } else {
      entries[i].style.display = "none";

    }
  }
}

Я хотел бы добиться возможности поиска по всем столбцам без исключения из них.

Большое спасибо за помощь!

Answer 1

Чего я хотел бы добиться, так это возможности поиска по всем столбцам, не исключая ни одного из них.

Просто измените свою функцию поиска для поиска по всем элементам tdчем указание двух переменных a и b.

Здесь я использую синтаксис Spread и метод Array.some () , чтобы сократитькод.

function searchFunction() {
    const input = document.getElementById("searchInput"),
        filter = input.value.toUpperCase(),
        table = document.getElementById("mainTableBody"),
        entries = table.getElementsByTagName("tr");

    // Loop all tr elements
    [...entries].forEach(tr => {
        // Loop all td elements, checking if innerHTML contains #searchInput value
        const containsSearch = [...tr.getElementsByTagName("td")].some(td =>
            td.innerHTML.toUpperCase().includes(filter)
        );

        tr.style.display = containsSearch ? "table-row" : "none";
    });
}

<input type="text" id="searchInput" onkeyup="searchFunction()" value="Search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue; this.style.color ='rgba(0,0,0,0.5)';">

<section class="main">
    <table id="maintable">
        <thead class="maintable-header">
            <tr>
                <th scope="col" style="width: 5%" class="number"></th>
                <th scope="col" style="width: 17.5%" class="role">Role</th>
                <th scope="col" style="width: 35%" class="project">Project</th>
                <th scope="col" style="width: 35%" class="credits">Credits</th>
                <th scope="col" style="width: 7.5%" class="year">Year</th>
            </tr>
        </thead>

        <tbody id="mainTableBody">
            <tr class="rowheader" id="rowheader5">
                <!-- ########################### ROW 5 ########################### -->
                <td style="padding-left: 0.5%;">5</td>
                <td>Project Management</td>
                <td>Fragile?</td>
                <td>Pentagram Stiftung</td>
                <td>2013</td>
            </tr>
            <tr class="projectinfo" id="projectinfo5">
                <td></td>
                <td class="align-text-top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis
                    iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td></td>
                <td></td>
            </tr>

            <tr class="rowheader" id="rowheader6">
                <!-- ########################### ROW 6 ########################### -->
                <td style="padding-left: 0.5%;">6</td>
                <td>Curating</td>
                <td>The Book Affair</td>
                <td>Automatic Books</td>
                <td>2009</td>
            </tr>
            <tr class="projectinfo" id="projectinfo6" style="height: 50px;">
                <td></td>
                <td class="align-text-top">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
                <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing
                    elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat
                    a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
                <td></td>
                <td></td>
            </tr>

            <tr class="rowheader" id="rowheader7">
                <!-- ########################### ROW 7 ########################### -->
                <td style="padding-left: 0.5%;">7</td>
                <td>Project Management</td>
                <td>Fragile?</td>
                <td>Pentagram Stiftung</td>
                <td>2013</td>
            </tr>
            <tr class="projectinfo" id="projectinfo7">
                <td></td>
                <td class="align-text-top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis
                    iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</section>