ಟೇಬಲ್‌ನಲ್ಲಿ ಸಕ್ರಿಯ ವರ್ಗ ಎಣಿಕೆಯೊಂದಿಗೆ ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸುವುದು
ಕೆಲಸ ಮಾಡುವಾಗ ಪ್ರತಿ ಕೋಶದ ವಿಷಯಗಳ ಆಧಾರದ ಮೇಲೆ ಕಸ್ಟಮ್ ನಡವಳಿಕೆಯನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಬಯಸಬಹುದು HTML ಕೋಷ್ಟಕಗಳು. ಉದಾಹರಣೆಗೆ, ಟೇಬಲ್ ಕೋಶಗಳಿಗೆ ತರಗತಿಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನಿಯೋಜಿಸಲು ನೀವು ನಿರ್ದಿಷ್ಟ ಮಾದರಿಗಳು ಅಥವಾ ಮಾನದಂಡಗಳನ್ನು ಬಳಸಬಹುದು. ಪರಿಣಾಮವಾಗಿ ನಿಮ್ಮ ಟೇಬಲ್ ಹೆಚ್ಚು ಉಪಯುಕ್ತ ಮತ್ತು ಆಕರ್ಷಕವಾಗಬಹುದು.
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಕೆಲವು ಅವಶ್ಯಕತೆಗಳನ್ನು ಪೂರೈಸುವ ಟೇಬಲ್ ಕೋಶಗಳು ಹೆಸರಿನ ವರ್ಗವನ್ನು ಹೊಂದಿರುತ್ತವೆ ಸಕ್ರಿಯ ಅವರಿಗೆ ಸೇರಿಸಲಾಗಿದೆ. ಎ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರತಿ ಕೋಶವನ್ನು ಪರೀಕ್ಷಿಸುವ, ಅದರ ವಿಷಯಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಮತ್ತು ನಂತರ ವರ್ಗವನ್ನು ಸೂಕ್ತವಾಗಿ ಅನ್ವಯಿಸುವ ಕಾರ್ಯವನ್ನು ಇದನ್ನು ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ನಿರ್ದಿಷ್ಟ ಕೋಶಗಳನ್ನು ಅವುಗಳ ಡೇಟಾಗೆ ಅನುಗುಣವಾಗಿ ಸಂಘಟಿಸುವ ಉತ್ಪಾದಕ ವಿಧಾನವಾಗಿದೆ.
ಅನ್ವಯಿಸಿದ ನಂತರ ಸಕ್ರಿಯ ಕೋಶಗಳ ಉಪವಿಭಾಗಕ್ಕೆ ವರ್ಗ, ಈ ವರ್ಗವನ್ನು ಹೊಂದಿರುವ ಕೋಶಗಳ ಸಂಖ್ಯೆಯನ್ನು ಎಣಿಸುವುದು ಆಗಾಗ್ಗೆ ಮುಂದಿನ ಹಂತವಾಗಿರಬಹುದು. ನೀವು ಈವೆಂಟ್ ಅಥವಾ ಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸಲು ಬಯಸಿದರೆ, ಎಣಿಕೆಯನ್ನು ತೋರಿಸುವ ಮಾದರಿಯನ್ನು ತೆರೆಯುವುದು, ಈ ಕೋಶಗಳನ್ನು ಎಣಿಸುವುದು ಸಾಕಷ್ಟು ಸಹಾಯಕವಾಗಬಹುದು.
ಈ ಟ್ಯುಟೋರಿಯಲ್ ಹೊಂದಿರುವ ಕೋಶಗಳ ಸಂಖ್ಯೆಯನ್ನು ಎಣಿಸಲು JavaScript ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನಿಮಗೆ ಕಲಿಸುತ್ತದೆ ಸಕ್ರಿಯ ವರ್ಗ ಮತ್ತು ಎಣಿಕೆಯನ್ನು ತೋರಿಸುವ ಮಾದರಿಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ರಾರಂಭಿಸಲು. ಬಳಸುತ್ತಿದೆ jQuery, ಪರಿಹಾರವು ಸರಳವಾಗಿದೆ, ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸರಳವಾಗಿದೆ.
| ಆಜ್ಞೆ | ಬಳಕೆಯ ಉದಾಹರಣೆ | |
|---|---|---|
| .each() | ಹೊಂದಾಣಿಕೆಯಾಗುವ ಅಂಶಗಳ ಗುಂಪಿನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಅಂಶವು ಈ jQuery ಕಾರ್ಯದಿಂದ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಇದು ಪ್ರತಿ ಟೇಬಲ್ ಕೋಶದ ಮೇಲೆ ಪುನರಾವರ್ತನೆ ಮಾಡುವ ಮೂಲಕ ಷರತ್ತುಬದ್ಧ ತರ್ಕ ಅಥವಾ ತರಗತಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ( | ) in our example. |
| addClass() | The selected items receive one or more class names added to them by this jQuery method. The script applies the ಸಕ್ರಿಯ ಅಥವಾ ಯಾವುದೂ ಇಲ್ಲ ಅವುಗಳ ವಿಷಯದ ಪ್ರಕಾರ ಕೋಶಗಳಿಗೆ ವರ್ಗ. | |
| .ಡೈಲಾಗ್() | Used with jQuery UI to generate a modal dialog. When the script triggers the modal, the autoOpen: true option makes sure it opens automatically and shows the number of active items. | |
| .text() | The text content of the chosen components is retrieved or set using this technique. In this instance, it checks to see if the contents of every | ಕೋಶವು ನಿರ್ದಿಷ್ಟ ಮಾದರಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. |
| RegExp() | ಈ JavaScript ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ನೊಂದಿಗೆ ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳನ್ನು ಮಾಡಲಾಗುತ್ತದೆ. ಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಗಳನ್ನು ಗುರುತಿಸುವ ಮೂಲಕ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ತರಗತಿಗಳನ್ನು ನಿಯೋಜಿಸಬಹುದು ದೊಡ್ಡ ಅಕ್ಷರಗಳ ನಂತರ ಸಂಖ್ಯೆಗಳು ಅಥವಾ c ನಂತರ ಅಂಕೆಗಳು. | |
| classList.add() | ಈ ಮೂಲ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ತಂತ್ರವು ಒಂದು ಅಂಶಕ್ಕೆ ನಿರ್ದಿಷ್ಟ ವರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. ಇದು ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರದಲ್ಲಿ jQuery ನ addClass() ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಸಕ್ರಿಯ ಅಥವಾ ಯಾವುದೂ ಇಲ್ಲ ಷರತ್ತುಗಳನ್ನು ಅವಲಂಬಿಸಿ ವರ್ಗ. | |
| DOMContentLoaded | HTML ಡಾಕ್ಯುಮೆಂಟ್ ಲೋಡ್ ಮತ್ತು ಪಾರ್ಸಿಂಗ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ, DOMContentLoaded ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲಾಗುತ್ತದೆ. ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಉದಾಹರಣೆಯಲ್ಲಿ, DOM ಲೋಡ್ ಆಗುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ ಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. | |
| querySelectorAll() | ನೀಡಲಾದ CSS ಸೆಲೆಕ್ಟರ್‌ಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಅಂಶವನ್ನು ಈ JavaScript ಕಾರ್ಯದಿಂದ ಹಿಂತಿರುಗಿಸಲಾಗುತ್ತದೆ. ಮೂಲ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪ್ರತಿಯೊಂದನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ | element in the table for further processing. |
| ಪ್ರತಿ () | An array method in JavaScript that lets you iterate over elements. Here, it's utilized to iterate over every table cell that querySelectorAll() returned and apply the required logic to each one. |
ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಕೋಶಗಳನ್ನು ಎಣಿಸುವುದು ಮತ್ತು ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸುವುದು
ಮೊದಲ ಸ್ಕ್ರಿಪ್ಟ್ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪ್ರತಿ ಟೇಬಲ್ ಸೆಲ್ ಅನ್ನು ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ, ಅದರ ವಿಷಯವನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಬಳಸಿಕೊಂಡು ಮೌಲ್ಯಮಾಪನವನ್ನು ಅವಲಂಬಿಸಿ ವರ್ಗವನ್ನು ನಿಗದಿಪಡಿಸಲಾಗಿದೆ jQuery. ಪ್ರತಿಯೊಂದರ ಮೂಲಕ ಪುನರಾವರ್ತಿಸುವ ಮೂಲಕ ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಸಾಧ್ಯಗೊಳಿಸಲಾಗಿದೆ
ಜೊತೆಗೆ RegExp() ಕನ್ಸ್ಟ್ರಕ್ಟರ್, ಅಕ್ಷರಗಳ ನಂತರ ಹೊಂದಾಣಿಕೆಯ ಸಂಖ್ಯೆಗಳಿಗೆ ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಈ ತಂತ್ರವು "1A" ಅಥವಾ "3C" ನಂತಹ ಡೇಟಾವನ್ನು ಹೊಂದಿರುವ ಕೋಶಗಳನ್ನು ಪ್ರಸ್ತುತ ವರ್ಗದೊಂದಿಗೆ ಗುರುತಿಸಲಾಗಿದೆ ಮತ್ತು ಲೇಬಲ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಕೋಶವು ಎಂಬ ಪ್ರತ್ಯೇಕ ವರ್ಗವನ್ನು ಪಡೆಯುತ್ತದೆ ಯಾವುದೂ ಇಲ್ಲ ವಿಷಯವು ವಿಭಿನ್ನ ಮಾದರಿಯೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯಾದರೆ, ಅಂತಹ "c" ನಂತರ ಒಂದು ಸಂಖ್ಯೆ. ಇದು ಕೋಷ್ಟಕದಲ್ಲಿನ ಡೇಟಾವನ್ನು ಹೆಚ್ಚು ನಿಖರವಾಗಿ ವರ್ಗೀಕರಿಸಲು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ. ಇದಲ್ಲದೆ, ದಿ addClass() ಕೋಶಗಳು ಈಗಾಗಲೇ ಹೊಂದಿರುವ ಯಾವುದೇ ವರ್ಗಗಳನ್ನು ಅಳಿಸದೆಯೇ ಈ ವರ್ಗಗಳನ್ನು ಸೇರಿಸಬಹುದು ಎಂದು ವಿಧಾನವು ಖಾತರಿಪಡಿಸುತ್ತದೆ.
ಮುಂದಿನ ಹಂತವು ಸೂಕ್ತವಾದ ಕೋಶಗಳನ್ನು ಎಣಿಕೆ ಮಾಡುವುದು ಮತ್ತು ಅವುಗಳನ್ನು ಸಕ್ರಿಯ ವರ್ಗದೊಂದಿಗೆ ಟ್ಯಾಗ್ ಮಾಡಿದ ನಂತರ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸುವುದು. ಪ್ರತಿ ಬಾರಿ ಕೋಶವು ಸಕ್ರಿಯ ವರ್ಗವನ್ನು ಪಡೆದಾಗ, ಎಣಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಹೆಸರಿನ ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ಉಳಿಸಲಾಗುತ್ತದೆ ಸಕ್ರಿಯ ಎಣಿಕೆ. ಈ ಎಣಿಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಕೋಷ್ಟಕದಲ್ಲಿನ ಅರ್ಹತಾ ಕೋಶಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಂಡುಹಿಡಿಯಬೇಕು. ಅನ್ನು ಬಳಸುವುದು .ಡೈಲಾಗ್() jQuery UI ನಿಂದ ಕಾರ್ಯ, ಎಣಿಕೆ ಮುಗಿದಾಗ ಒಂದು ಮಾದರಿಯನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ದಿ ಸ್ವಯಂ ತೆರೆಯಿರಿ: ನಿಜ ಗುಣಲಕ್ಷಣವು ಮೋಡಲ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತೆರೆಯಲು ಅನುಮತಿಸುತ್ತದೆ. ಸಕ್ರಿಯ ಕೋಶಗಳ ಸಂಖ್ಯೆಯನ್ನು ಮೋಡಲ್ ಒಳಗೆ ತೋರಿಸಲಾಗಿದೆ.
ಎರಡನೆಯ ಸಂದರ್ಭದಲ್ಲಿ, ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಒಂದೇ ವಿಧಾನವನ್ನು ನಕಲು ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. querySelectorAll() ಎಲ್ಲಾ ಟೇಬಲ್ ಕೋಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಈ ವಿಧಾನದಲ್ಲಿ jQuery ಬದಲಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಒಂದು ನೇರ ಪ್ರತಿ () ಲೂಪ್ ಪ್ರತಿ ಕೋಶದ ಮೂಲಕ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. jQuery ಪರಿಹಾರದಲ್ಲಿರುವಂತೆಯೇ ಕೋಶದ ವಿಷಯವನ್ನು ಹೊಂದಿಸಲು ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಹೊಂದಾಣಿಕೆ ಪತ್ತೆಯಾದರೆ, ಸಕ್ರಿಯ ಎಣಿಕೆಯನ್ನು ನವೀಕರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಸಕ್ರಿಯ ವರ್ಗವನ್ನು ಬಳಸಿಕೊಂಡು ಸೇರಿಸಲಾಗುತ್ತದೆ classList.add() ವಿಧಾನ. ಅಂತಿಮವಾಗಿ, DOM ನಲ್ಲಿ ಪೂರ್ವನಿರ್ಧರಿತ ಮಾದರಿ ಅಂಶದ ಆಂತರಿಕ HTML ಅನ್ನು ಬದಲಾಯಿಸುವುದು ಮಾದರಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. jQuery ಉದಾಹರಣೆಯಂತೆಯೇ ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಈ ಪರಿಹಾರವನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಧಿಸಲಾಗುತ್ತದೆ, ಇದು ಹೊರಗಿನ ಗ್ರಂಥಾಲಯಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲ.
ನಿರ್ದಿಷ್ಟ ವರ್ಗದೊಂದಿಗೆ ಕೋಶಗಳನ್ನು ಎಣಿಸುವುದು ಮತ್ತು ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸುವುದು
ಈ ವಿಧಾನವು ನಿರ್ದಿಷ್ಟ ವರ್ಗವನ್ನು ಹೊಂದಿರುವ ಐಟಂಗಳನ್ನು ಎಣಿಕೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ವರ್ಗಗಳನ್ನು ನಿಯೋಜಿಸುತ್ತದೆ jQuery. ನಂತರ ಅದು ಮಾದರಿ ವಿಂಡೋವನ್ನು ತೆರೆಯುತ್ತದೆ.
$(document).ready(function() {var activeCount = 0;$('td').each(function() {var $this = $(this);if ($this.text().match(new RegExp(/[0-9][A-Z]/)) !== null) {$this.addClass('active');activeCount++;}if ($this.text().match(new RegExp(/c[0-9]/)) !== null) {$this.addClass('none');}});// Trigger the modal with the count of 'active' items$('#myModal').dialog({ autoOpen: true, modal: true, title: 'Active Count',open: function() { $(this).html('Number of active items: ' + activeCount); } });});
ಪರ್ಯಾಯ: ಸಕ್ರಿಯ ಕೋಶಗಳನ್ನು ಎಣಿಸಲು ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುವುದು
jQuery ನಂತಹ ಥರ್ಡ್-ಪಾರ್ಟಿ ಲೈಬ್ರರಿಗಳನ್ನು ಅವಲಂಬಿಸುವ ಬದಲು, ಈ ಪರಿಹಾರವು ಒಂದು ವರ್ಗವನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಬಳಸುವ ಕೋಶಗಳನ್ನು ಎಣಿಸುತ್ತದೆ ಶುದ್ಧ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್.
document.addEventListener('DOMContentLoaded', function() {var cells = document.querySelectorAll('td');var activeCount = 0;cells.forEach(function(cell) {if (/[0-9][A-Z]/.test(cell.textContent)) {cell.classList.add('active');activeCount++;} else if (/c[0-9]/.test(cell.textContent)) {cell.classList.add('none');}});// Open the modal to display the countvar modal = document.getElementById('myModal');modal.style.display = 'block';modal.innerHTML = 'Number of active items: ' + activeCount;});
ಬ್ಯಾಕೆಂಡ್ ಅಪ್ರೋಚ್: EJS ಟೆಂಪ್ಲೇಟಿಂಗ್‌ನೊಂದಿಗೆ Node.js ಮತ್ತು ಎಕ್ಸ್‌ಪ್ರೆಸ್ ಅನ್ನು ಬಳಸುವುದು
ಈ Node.js ಉದಾಹರಣೆ ಬಳಕೆ EJS ಟೆಂಪ್ಲೇಟಿಂಗ್ ಕೋಶಗಳನ್ನು ಸರ್ವರ್-ಸೈಡ್ ಎಣಿಸುವಾಗ ಮಾದರಿ ವಿಂಡೋದಲ್ಲಿ ಸೆಲ್ ಎಣಿಕೆಯನ್ನು ನಿರೂಪಿಸಲು.
const express = require('express');const app = express();app.set('view engine', 'ejs');app.get('/', (req, res) => {const tableData = [['1A', '2B', '3C'], ['c1', '4D', '5E']];let activeCount = 0;tableData.forEach(row => {row.forEach(cell => {if (/[0-9][A-Z]/.test(cell)) {activeCount++;}});});res.render('index', { activeCount });});app.listen(3000, () => console.log('Server running on port 3000'));
ಬ್ಯಾಕೆಂಡ್ ಪರಿಹಾರಕ್ಕಾಗಿ ಜೆಸ್ಟ್‌ನೊಂದಿಗೆ ಘಟಕ ಪರೀಕ್ಷೆ
ಇಲ್ಲಿ ನಾವು Node.js ಪರಿಹಾರಕ್ಕಾಗಿ ಘಟಕ ಪರೀಕ್ಷೆಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತೇವೆ ಜೆಸ್ಟ್ ಸಕ್ರಿಯ ಎಣಿಕೆ ತರ್ಕವು ಉದ್ದೇಶಿಸಿದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವಂತೆ ಮಾಡಲು.
const { countActiveCells } = require('./countActive');test('counts active cells correctly', () => {const tableData = [['1A', '2B', '3C'], ['c1', '4D', '5E']];expect(countActiveCells(tableData)).toBe(4);});test('returns zero if no active cells', () => {const tableData = [['c1', 'c2', 'c3'], ['c4', 'c5', 'c6']];expect(countActiveCells(tableData)).toBe(0);});
JavaScript ನಲ್ಲಿ ಸೆಲ್ ಆಯ್ಕೆ ಮತ್ತು ವರ್ಗ ನಿರ್ವಹಣೆಯನ್ನು ವಿಸ್ತರಿಸಲಾಗುತ್ತಿದೆ
ಜೊತೆ ಕೆಲಸ ಮಾಡುತ್ತಿದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು HTML ಕೋಷ್ಟಕಗಳು ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅಥವಾ ವಿಷಯಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ವರ್ಗಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮಾರ್ಪಡಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಸಹ ಒಳಗೊಂಡಿರುತ್ತದೆ. ನೀವು ಕೇವಲ ಜೀವಕೋಶಗಳನ್ನು ಎಣಿಕೆ ಮಾಡುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಮಾಡಬಹುದು; ನೀವು ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಸಹ ನಿರ್ವಹಿಸಬಹುದು ಮತ್ತು ಟೇಬಲ್‌ನ ವಿಷಯವನ್ನು ತಕ್ಷಣ ಬದಲಾಯಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ವಿಧಾನಗಳನ್ನು ಬಳಸುವುದು removeClass() jQuery ನಲ್ಲಿ ಅಥವಾ classList.remove() ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಬಳಕೆದಾರರು ಟೇಬಲ್ ಸೆಲ್‌ನಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ವರ್ಗವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮಾರ್ಪಡಿಸಬಹುದು, ಹೈಲೈಟ್ ಮಾಡಬಹುದು ಅಥವಾ ವರ್ಗವನ್ನು ತೆಗೆದುಹಾಕಬಹುದು. ಪರಿಣಾಮವಾಗಿ ಕೋಷ್ಟಕಗಳು ಗಣನೀಯವಾಗಿ ಹೆಚ್ಚು ಸಂವಾದಾತ್ಮಕವಾಗುತ್ತವೆ ಮತ್ತು ನೈಜ ಸಮಯದಲ್ಲಿ ವಿಷಯಕ್ಕೆ ನವೀಕರಣಗಳನ್ನು ಆಧರಿಸಿ ಮತ್ತಷ್ಟು ಗ್ರಾಹಕೀಕರಣವು ಸಾಧ್ಯ.
ವರ್ಗ ಬದಲಾವಣೆಯನ್ನು ಅವಲಂಬಿಸಿ ನಿರ್ದಿಷ್ಟ ಕೋಶಗಳನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಬೇರ್ಪಡಿಸಬೇಕಾದ ನೈಜ-ಸಮಯದ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಟೇಬಲ್ ಇದಕ್ಕೆ ಉಪಯುಕ್ತವಾದ ಬಳಕೆಯ ಸಂದರ್ಭವಾಗಿದೆ. ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಬಳಸಿಕೊಂಡು ಈ ಮಾರ್ಪಾಡುಗಳನ್ನು ಉಂಟುಮಾಡುವ ಕಾರ್ಯಗಳನ್ನು ಬಂಧಿಸುವುದು ಸರಳವಾಗಿದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಉದಾಹರಣೆಗೆ, ನೀವು ಬಳಸಬಹುದು addEventListener() ಕ್ಲಿಕ್‌ಗಳು ಅಥವಾ ಕೀ ಪ್ರೆಸ್‌ಗಳಂತಹ ನಿರ್ದಿಷ್ಟ ಸೆಲ್‌ಗಳಲ್ಲಿ ಈವೆಂಟ್‌ಗಳನ್ನು ಕೇಳಲು. ಹೆಚ್ಚುವರಿ ವರ್ಗ ಮಾರ್ಪಾಡುಗಳು ಅಥವಾ ಕೌಂಟರ್‌ಗೆ ನವೀಕರಣಗಳು ಸಂಖ್ಯೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಸಕ್ರಿಯ ಕೋಷ್ಟಕದಲ್ಲಿನ ಜೀವಕೋಶಗಳು ಈ ಪರಸ್ಪರ ಕ್ರಿಯೆಯಿಂದ ಉಂಟಾಗಬಹುದು.
ಬಳಕೆದಾರರಿಂದ ಯಾವುದೇ ಇನ್‌ಪುಟ್ ಇಲ್ಲದೆಯೇ ಕೋಶಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಬೇಕಾದ ಸಂದರ್ಭಗಳ ಕುರಿತು ಸಹ ನೀವು ಯೋಚಿಸಬಹುದು. ಟೇಬಲ್ ವಿಷಯವನ್ನು ಮಧ್ಯಂತರ ಅಥವಾ AJAX ಕರೆಗಳ ಮೂಲಕ ನಿರಂತರವಾಗಿ ನವೀಕರಿಸಬಹುದು ಮತ್ತು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಬಹುದು. ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳು ಮತ್ತು ವಿಧಾನಗಳು setInterval() ಟೇಬಲ್ ತನ್ನ ತರಗತಿಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬದಲಾಯಿಸಲು ಮತ್ತು ಮಿತಿಯನ್ನು ತಲುಪಿದಾಗ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸಲು ಅನುಮತಿಸಿ. ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳು ಮತ್ತು ಡೇಟಾ-ಚಾಲಿತ ಸೆಟ್ಟಿಂಗ್‌ಗಳಂತಹ ಹೆಚ್ಚು ಡೈನಾಮಿಕ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಈಗ ಟೇಬಲ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲಾಸ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಸೆಲ್ ಎಣಿಕೆಯ ಬಗ್ಗೆ ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
- ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ನಿರ್ದಿಷ್ಟ ವರ್ಗಕ್ಕೆ ಸೇರಿದ ಘಟಕಗಳನ್ನು ನಾನು ಹೇಗೆ ಎಣಿಸಬಹುದು?
- ಆ ವರ್ಗದೊಂದಿಗೆ ಪ್ರತಿಯೊಂದು ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು, ಬಳಸಿ document.querySelectorAll('.className'); ಅವುಗಳನ್ನು ಎಣಿಸಲು, ಬಳಸಿ length.
- ಟೇಬಲ್ ಸೆಲ್‌ನ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ, ನಾನು ಅದಕ್ಕೆ ವರ್ಗವನ್ನು ಹೇಗೆ ಸೇರಿಸಬಹುದು?
- ಬಳಸಿ ನೀವು ವರ್ಗವನ್ನು ಅನ್ವಯಿಸಬಹುದು classList.add() ಮತ್ತು ಬಳಸಿ ಕೋಶದ ವಿಷಯಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ textContent ಅಥವಾ innerText ಗುಣಲಕ್ಷಣಗಳು.
- ಏನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ text() ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ textContent jQuery ನಲ್ಲಿ?
- textContent ಸ್ಥಳೀಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಸ್ತಿ, ಮತ್ತು text() ಆಯ್ದ ಅಂಶಗಳ ವಿಷಯವನ್ನು ಹಿಂಪಡೆಯುವ ಅಥವಾ ಮಾರ್ಪಡಿಸುವ jQuery ವಿಧಾನವಾಗಿದೆ.
- ನಿರ್ದಿಷ್ಟ ವರ್ಗಕ್ಕೆ ಸೇರಿದ ಕೋಶಗಳನ್ನು ಎಣಿಸುವಾಗ, ನಾನು ಮಾದರಿಯನ್ನು ಹೇಗೆ ಪ್ರಾರಂಭಿಸಬಹುದು?
- jQuery ನಲ್ಲಿ ಒಂದು ಮಾದರಿಯನ್ನು ನಿರ್ಮಿಸಲು ಮತ್ತು ನಿರ್ದಿಷ್ಟ ವರ್ಗದೊಂದಿಗೆ ಐಟಂಗಳ ಸಂಖ್ಯೆಯನ್ನು ಅವಲಂಬಿಸಿ ಅದನ್ನು ಪ್ರಚೋದಿಸಲು, ಬಳಸಿ .dialog().
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಒಂದು ಅಂಶದಿಂದ ನಾನು ವರ್ಗವನ್ನು ಹೇಗೆ ತೆಗೆದುಕೊಳ್ಳಬಹುದು?
- ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ನೀವು ಬಳಸಬಹುದು classList.remove('className') ಒಂದು ಅಂಶದಿಂದ ವರ್ಗವನ್ನು ತೆಗೆದುಹಾಕಲು.
ಕೋಶ ಎಣಿಕೆ ಮತ್ತು ಮಾದರಿಗಳ ಅಂತಿಮ ಆಲೋಚನೆಗಳು
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ jQuery ಅನ್ನು ನಿರ್ದಿಷ್ಟ ವರ್ಗದೊಂದಿಗೆ ಎಣಿಸುವ ಕೋಶಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಬಳಸಬಹುದು ಸಕ್ರಿಯ, ಪರಿಣಾಮಕಾರಿ ರೀತಿಯಲ್ಲಿ. ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳು ಟೇಬಲ್ ವಿಷಯದಲ್ಲಿ ಮಾದರಿಗಳನ್ನು ಗುರುತಿಸಲು ಉಪಯುಕ್ತ ಸಾಧನವಾಗಿದೆ, ಇದು ಡೈನಾಮಿಕ್ ವರ್ಗ ಕಾರ್ಯಯೋಜನೆಗಳು ಮತ್ತು ಇತರ ಸಂವಹನಗಳನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತದೆ.
ಇದಲ್ಲದೆ, ಟೇಬಲ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸುವ ಉಪಯುಕ್ತ ವಿಧಾನವೆಂದರೆ ಈ ಸಕ್ರಿಯ ಕೋಶಗಳ ಸಂಖ್ಯೆಯನ್ನು ಆಧರಿಸಿ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸುವುದು. ದಿ .ಡೈಲಾಗ್() jQuery ಅಥವಾ ಕಸ್ಟಮ್ ಮಾದರಿಯಲ್ಲಿನ ಕಾರ್ಯವು ಟೇಬಲ್ ವಿಷಯವನ್ನು ನಿಭಾಯಿಸಲು ಬಂದಾಗ ಬಹುಮುಖತೆಯನ್ನು ಒದಗಿಸುವ ಎರಡು ವಿಧಾನಗಳಾಗಿವೆ.
ಮೂಲಗಳು ಮತ್ತು ಉಲ್ಲೇಖಗಳು
- ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ತರಗತಿಗಳನ್ನು ಸೇರಿಸುವ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು jQuery ಬಳಸಿಕೊಂಡು ವಿಷಯವನ್ನು ನಿರ್ವಹಿಸುವ ಮಾಹಿತಿಯನ್ನು ಇಲ್ಲಿ ಲಭ್ಯವಿರುವ ವಿವರವಾದ ಮಾರ್ಗದರ್ಶಿಯಿಂದ ಪಡೆಯಲಾಗಿದೆ jQuery API ಡಾಕ್ಯುಮೆಂಟೇಶನ್ .
- ವಿಷಯವನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳನ್ನು ಬಳಸುವ ಒಳನೋಟಗಳನ್ನು ಇಲ್ಲಿ ಕಂಡುಬರುವ ದಾಖಲಾತಿಯಿಂದ ಉಲ್ಲೇಖಿಸಲಾಗಿದೆ MDN ವೆಬ್ ಡಾಕ್ಸ್ .
- jQuery UI ಡೈಲಾಗ್ ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು ಮಾಡಲ್ ರಚನೆ ಮತ್ತು ಅದರ ವಿವರವಾದ ಬಳಕೆಯನ್ನು ಇಲ್ಲಿ ಅನ್ವೇಷಿಸಬಹುದು jQuery UI ಡೈಲಾಗ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ .
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ವರ್ಗಗಳೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಎಣಿಸುವ ಪ್ರಾಮುಖ್ಯತೆ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳಂತಹ ಲೇಖನಗಳಲ್ಲಿ ಪರಿಶೀಲಿಸಬಹುದು FreeCodeCamp JavaScript ಗೈಡ್ .