ניווט

    תחומים
    • הרשמה
    • התחברות
    • חיפוש
    • קטגוריות
    • פוסטים אחרונים
    • משתמשים
    • חיפוש
    • מקצועות
    חוקי הפורום

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

    תכנות
    4
    12
    85
    טוען פוסטים נוספים
    • מהישן לחדש
    • מהחדש לישן
    • הכי הרבה הצבעות
    תגובה
    • הגב כנושא
    התחבר בכדי לפרסם תגובה
    נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
    • חנון המרבה
      חנון המרבה נערך לאחרונה על ידי

      יש לי פונקציית חיפוש בטבלת 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 תגובה 1 תגובה אחרונה תגובה ציטוט 0
      • yossiz
        yossiz @חנון המרבה נערך לאחרונה על ידי 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";
            }
          }
        }
        
        
        תגובה 1 תגובה אחרונה תגובה ציטוט 4
        • dovid
          dovid נערך לאחרונה על ידי 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";
                  }
              }
          }
          
          א yossiz 2 תגובות תגובה אחרונה תגובה ציטוט 3
          • א
            אהרן @dovid נערך לאחרונה על ידי

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

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

            מה i מכיל?

            dovid תגובה 1 תגובה אחרונה תגובה ציטוט 1
            • dovid
              dovid @אהרן נערך לאחרונה על ידי

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

              א תגובה 1 תגובה אחרונה תגובה ציטוט 1
              • א
                אהרן @dovid נערך לאחרונה על ידי

                @dovid
                אפשר גם

                    var checkOneRow = (tr) => {
                        return [ ...tr.getElementsByTagName("td") ]
                                .filter(curTd => curTd.innerText.toUpperCase().indexOf(filter) > -1)
                                .length
                    }
                
                dovid תגובה 1 תגובה אחרונה תגובה ציטוט 0
                • dovid
                  dovid @אהרן נערך לאחרונה על ידי dovid

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

                  א תגובה 1 תגובה אחרונה תגובה ציטוט 1
                  • yossiz
                    yossiz @dovid נערך לאחרונה על ידי

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

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

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

                    dovid תגובה 1 תגובה אחרונה תגובה ציטוט 2
                    • א
                      אהרן @dovid נערך לאחרונה על ידי

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

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

                      אשמח לדוגמא.

                      תגובה 1 תגובה אחרונה תגובה ציטוט 0
                      • dovid
                        dovid @yossiz נערך לאחרונה על ידי

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

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

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

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

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

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

                        אשמח לדוגמא.

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

                        return [...tr.getElementsByTagName("td")].some(e => e.innerText.includes(filter));
                        א תגובה 1 תגובה אחרונה תגובה ציטוט 3
                        • א
                          אהרן @dovid נערך לאחרונה על ידי

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

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

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

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

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

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

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

                          אשמח לדוגמא.

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

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

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

                          dovid תגובה 1 תגובה אחרונה תגובה ציטוט 0
                          • dovid
                            dovid @אהרן נערך לאחרונה על ידי dovid

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

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

                            תגובה 1 תגובה אחרונה תגובה ציטוט 3
                            • 1 / 1
                            • First post
                              Last post
                            בא תתחבר לדף היומי!