Javascript πίνακας focus στην επόμενη γραμμή αυτόματα

[merchenary]

Καλημέρα παιδιά,

Με την παρακάτω λούπα έχω φτιάξει γραμμές σε έναν πίνακα : (δεν είναι όλος ο κώδικας)

for (var i = 0; i < number_of_row; ++i) {
var new_row = table.insertRow();

'Ολες οι γραμμές του πίνακα ακούνε με την εντολή π.χ. :

span_local.appendChild(input_local).value = "Γειά σας";

Εμφανίζει σε όλες της γραμμές Γειά σας.

 

Πώς θα κάνω τον πίνακα αφού γεμίσει το length της πρώτης γραμμής να πάει στην επόμενη και πάει λέγοντας? Δηλαδή maxlength και focus?

[PC_MAGAS]

Χμμ βλέπω κάποια εξηγηματικά κενά στην ερώτησή σου:

1. Στο loop η function `table.insertRow()` τι κάνει;
2. Ακόμη το loop δεν είναι πλήρες (syntax error) λειπει bracket.

Καλύτερα να μην προσπαθείς να εξηγείς το πρόβλημά σου στα Ελληνικά αλλά σε javascript δίνοντας ένα δείγμα κώδικα που δουλεύει. Θα βοηθούσε πολύ ένα μικρό δείγμα που περιγράφει το πρόβλημά σου σε site όπως: https://codepen.io/

Η ιδέα δεν είναι να απαναράγεις όλο το project σου από την αρχή αλλά να δώσεις επαρκές κώδικα ώστε να περιγράψεις το πρόβλημά σου. Ένα παράδειγμα που μπορείς να βασιστής παρόλο που δεν είναι javascript: https://dba.stackexchange.com/q/246562

Η βάση στην παραπάνω περίπτωση δεν είχε τους πίνακες ohimesama και oujisama όμως για να μην βγάλω production πίνακες αέρα πατέρα έκανα ένα sample περιγράφοντας το πρόβλημά μου. Έτσι στην περίπτωση σου προσπάθησε να δώσεις στο codepen μια αναπαραγωγή του προβλήματός σου χωρίς όμως να δίνεις κανονικό η όταν δίνεις τον ελάχιστο κώδικα.

 

Πίστεψε με είναι μια τεχνική που μου έλυσε τα χέρια.Ακόμη ουκ ολίγες φορές με βοήθησε να κατανοήσω το πρόβλημα η προσπάθεια να το αναπαράξω και καθώς ρωτούσα πριν πατήσω το κουμπί send να βρώ την λύση. Ακόμη προσπάθησε στο μυαλό σου να μπορείς να περιγράφεις το τελικό αποτέλεσμα, σε ποια κατάσταση είσαι και που σκαλώνεις.

[k33theod]

Και για μένα δεν κατανοητό πιο είναι το πρόβλημα σου.  Φαντάζομαι ότι είναι στο iteration των κελιών του πίνακα, έτσι ώστε να τρέξεις όλα τα κελιά του.

Θα πάρεις λοιπόν τα rows και σε κάθε row θα πάρεις τα cells. Αυτό θα το κάνεις με δύο loops το ένα μέσα στο άλλο.

var my_table = document.getElementById('my_table'); epilegei to table
var rows = my_table.rows;
//tora ftiaxeis tis loopes
for (row of rows)
	for (cell of row.cells)
		cell.focus(); trexei ola ta kelia toy pinaka kai kanei focus

Στη σελίδα αυτή έχει https://www.w3schools.com/jsref/default.asp

έχει το reference για όλο το dom.  Εάν δηλαδή έχεις ένα table τι attributes και τι methods έχεις διαθέσιμα https://www.w3schools.com/jsref/dom_obj_table.asp.  Επίσης μετά βλέπεις για το row https://www.w3schools.com/jsref/dom_obj_tablerow.asp και έτσι κάνεις τη ζωή σου εύκολη.

To πως θα κάνεις το iteration είναι θέμα δικό σου κοίτα το for και το forEach.

[merchenary]

Στις 1/9/2019 στις 10:34 ΜΜ, k33theod είπε

Και για μένα δεν κατανοητό πιο είναι το πρόβλημα σου.  Φαντάζομαι ότι είναι στο iteration των κελιών του πίνακα, έτσι ώστε να τρέξεις όλα τα κελιά του.

Θα πάρεις λοιπόν τα rows και σε κάθε row θα πάρεις τα cells. Αυτό θα το κάνεις με δύο loops το ένα μέσα στο άλλο.

var my_table = document.getElementById('my_table'); epilegei to table
var rows = my_table.rows;
//tora ftiaxeis tis loopes
for (row of rows)
	for (cell of row.cells)
		cell.focus(); trexei ola ta kelia toy pinaka kai kanei focus

Στη σελίδα αυτή έχει https://www.w3schools.com/jsref/default.asp

έχει το reference για όλο το dom.  Εάν δηλαδή έχεις ένα table τι attributes και τι methods έχεις διαθέσιμα https://www.w3schools.com/jsref/dom_obj_table.asp.  Επίσης μετά βλέπεις για το row https://www.w3schools.com/jsref/dom_obj_tablerow.asp και έτσι κάνεις τη ζωή σου εύκολη.

To πως θα κάνεις το iteration είναι θέμα δικό σου κοίτα το for και το forEach.

Παιδιά σόρρυ που δεν διατύπωσα σωστά το προβλημά μου, με την λούπα δημιουργώ της γραμμές του πίνακα. 

Εδώ που λες ότι τρέχει όλα τα κελιά του πίνακα και κάνει focus τώρα κάνει focus σε όλα και σταματάει στο τελευταίο κελί :

span_local.appendChild(input_local).focus();

,εγώ θέλω το focus να γίνεται σε περίπτωση που ο χρήστης γράφει στην 2 γραμμή άν το κελί φτάσει στο max length να κάνει  focus αυτόματα στο κελί 3. Αν γράφει στην 5 να πάει στην 6 και πάει λέγοντας... Επίσης το πρόβλημα είναι και αν κάνει copy paste ένα κείμμενο στα κελιά με περισσότερους χαρακτήρες απο το μέγεθος του κελιού αλλά αυτό πάει σε 2 μοίρα...

Δες εδώ πάνω κάτω τι θέλω :

http://jsfiddle.net/4m5fg/5/

Αλλά εγώ τα a b c στις γραμμές του παραγείγματος έχω 40 γραμμές πίνακα που δημιούργησα με την javascript.

Επεξ/σία 2 Σεπτεμβρίου 2019 από merchenary

[PC_MAGAS]

Δηλαδή θες να κάνεις έναν δυναμικό πίνακα σωστά για αρχή σωστά;

Μετά θέλεις να κάνεις κάτι στον δυναμικό πίνακα αυτόν. Αυτό δεν είναι το βήμα 1 του προβλήματός σου;

[k33theod]

 

Στις 2/9/2019 στις 10:44 ΜΜ, merchenary είπε

,εγώ θέλω το focus να γίνεται σε περίπτωση που ο χρήστης γράφει στην 2 γραμμή άν το κελί φτάσει στο max length να κάνει  focus αυτόματα στο κελί 3. Αν γράφει στην 5 να πάει στην 6 και πάει λέγοντας... Επίσης το πρόβλημα είναι και αν κάνει copy paste ένα κείμμενο στα κελιά με περισσότερους χαρακτήρες απο το μέγεθος του κελιού αλλά αυτό πάει σε 2 μοίρα...

 Όταν θες να αλλάξεις τη συμπεριφορά ενός στοιχείου,  μετά από ένα event χρησιμοποιείς eventListener. Θα κάνεις λοιπόν έναν eventListener να ακούει στο event/s που θες και να κάνει αυτό που θες.

 

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

 

[merchenary]

15 ώρες πριν, PC_MAGAS είπε

Δηλαδή θες να κάνεις έναν δυναμικό πίνακα σωστά για αρχή σωστά;

Μετά θέλεις να κάνεις κάτι στον δυναμικό πίνακα αυτόν. Αυτό δεν είναι το βήμα 1 του προβλήματός σου;

Τον πίνακα τον έχω φτιάξει, (το μετά είναι το δύσκολο) το πως θα ελένξω την κάθε γραμμή του πίνακα έτσι ώστε όταν γράφει κάποιος κάτι και το value.length είναι μεγαλύτερο απο το maxLength να πηγαίνει στην επόμενη γραμμή.

Επεξ/σία 4 Σεπτεμβρίου 2019 από merchenary

[PC_MAGAS]

Άρα στο sample σου βάλε και έναν πίνακα http://jsfiddle.net/4m5fg/5/ η ιδέα είναι να εξηγήσεις πλήρως το πρόβλημά σου χωρίς όμως να αποκαλύψεις κάποιο μυστικό. Από την άλλη εάν είναι learning project βάλτο έως έχει.