שאלה ב JS מוטמעת ב HTML

[חנון המרבה]

יש לי פונקציית חיפוש בטבלת HTML בשפת ג'אווה סקיפט, והחיפוש מחפשת רק בעמודה מסויימת הטבלה האם אפשר להגדיר שיחפש בכל העמודות?! (לי יש רק שתי עמודות, אז מספיק לי שיחפש רק בשני העמודות הראשונות.

function Search() {


  var input, filter, table, tr, td, i, txtValue ;
  var cnt = 0 ;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable7");

  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = 
tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
		cnt = cnt + 1 ;
      } else {
        tr[i].style.display = "none";
      }
    }       
  }

בשורה הזאת

tr[i].getElementsByTagName("td")[0];

אם אני כותב בסוף [0] הוא מחפש בעמודה הראשונה, אם אני כותב [1] אז מחפש בעמודה השניה, וכן הלאה, השאלה איך אני עושה שיחפש בכל העמודות.

[yossiz]

@חנון-המרבה

function Search() {
  var input, filter, table, tr, td, i, txtValue;
  var cnt = 0;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable7");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    let found = false;
    td = tr[i].getElementsByTagName("td");
    for (let j = 0; i < td.length; j++) {
      if (td[j]) {
        txtValue = td[j].textContent || td[j].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          cnt = cnt + 1;
          found = true;
        }
      }
    }
    if (found) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}

[dovid]

@yossiz אמר בשאלה ב JS מוטמעת ב HTML:

myTable7

הקוד של @yossiz בנוי באופן שרוצים לספור גם כמה תוצאות בתוך אותה שורה (למרות שבקוד שהוצג לא נעשה שימוש בספירה הזו),
וממילא הוא חייב לעבור על כל העמודות (אוי ואבוי ).
אם זה לא חשוב יש לצאת מהלולאה הפנימית במקרה של מציאה ע"י brake.
כמו"כ לא הבנתי למה השתמשו בtextContent, למה לא רק בinnerText שיותר מתאים למטרה פה.
שכתבתי את הקוד לספירת שורות בלבד, וגם קצת שיניתי אותו לטעמי:

 Search("myTable7", "myInput");

function Search(tableId, inputId) {
    var input = document.getElementById(tableId);
    var table = document.getElementById(inputId);

    var filter = input.value.toUpperCase();

    var checkOneRow = function (tr) {
        var td = tr.getElementsByTagName("td");

        for (let j = 0; i < td.length; j++)
            if (td[j].innerText.toUpperCase().indexOf(filter) > -1)
                return true;
    }

    var cnt = 0;
    var tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        if (checkOneRow(tr[i])) {
            cnt++;
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

[אהרן]

@dovid אמר בשאלה ב JS מוטמעת ב HTML:

var td = tr[i].getElementsByTagName("td");

מה i מכיל?

[dovid]

@אהרן צודק תיקנתי.

[אהרן]

@dovid
אפשר גם

    var checkOneRow = (tr) => {
        return [ ...tr.getElementsByTagName("td") ]
                .filter(curTd => curTd.innerText.toUpperCase().indexOf(filter) > -1)
                .length
    }

[dovid]

@אהרן אפשר הרבה יותר מזה (find וגם includes שניהם חוסכים גם ביצועים) אבל זה נראה שהלכו פה עם ES5 ומטה.
כמו"כ כתבתי שהקוד שלי בא לחסוך מעבר מיותר על כל הtd, ואיבדת את זה.

[yossiz]

@dovid אמר בשאלה ב JS מוטמעת ב HTML:

הקוד של @yossiz בנוי באופן שרוצים לספור גם כמה תוצאות בתוך אותה שורה (למרות שבקוד שהוצג לא נעשה שימוש בספירה הזו),

נכון, שמתי לב לכל זה. רציתי לעשות כמה שפחות שינויים למבנה הקוד.

[אהרן]

@dovid אמר בשאלה ב JS מוטמעת ב HTML:

אפשר הרבה יותר מזה

אשמח לדוגמא.

[dovid]

@yossiz אמר בשאלה ב JS מוטמעת ב HTML:

נכון, שמתי לב לכל זה. רציתי לעשות כמה שפחות שינויים למבנה הקוד.

ברור, רק שיתפתי את השואל בנקודה הזו.

@אהרן אמר בשאלה ב JS מוטמעת ב HTML:

@dovid אמר בשאלה ב JS מוטמעת ב HTML:

אפשר הרבה יותר מזה

אשמח לדוגמא.

אני התכוונתי לבדוק בfind אם ריק אבל אח"כ נזכרתי בsome שעושה בדיוק את זה, הוא מחזיר חיובי מייד במקרה הראשון של הצלחה:

return [...tr.getElementsByTagName("td")].some(e => e.innerText.includes(filter));

[אהרן]

@dovid אמר בשאלה ב JS מוטמעת ב HTML:

@yossiz אמר בשאלה ב JS מוטמעת ב HTML:

נכון, שמתי לב לכל זה. רציתי לעשות כמה שפחות שינויים למבנה הקוד.

ברור, רק שיתפתי את השואל בנקודה הזו.

@אהרן אמר בשאלה ב JS מוטמעת ב HTML:

@dovid אמר בשאלה ב JS מוטמעת ב HTML:

אפשר הרבה יותר מזה

אשמח לדוגמא.

אני התכוונתי לבדוק בfind אם ריק אבל אח"כ נזכרתי בsome שעושה בדיוק את זה, הוא מחזיר חיובי מייד במקרה הראשון של הצלחה:

return [...tr.getElementsByTagName("td")].some(e => e.innerText.includes(filter));

זה יותר קצר?
נראה שרק בתווים בודדים.

[dovid]

@אהרן זה לא בא לקצר...
תקרא את מה שכתבתי.
אם נדקדק פה על קוצו של יוד, אז גם Array.from (שזה בעצם ה [...]) כנראה פחות יעיל מלולאה.
אבל לא נכנסתי לזה, כי קריאות דוחה ביצועים בכלל ובצד לקוח בפרט.

עריכה: לחיסכון בArray.from ראה https://tchumim.com/topic/9259 .