JavaScript βιβλιοθήκη διαμόρφωσης αριθμητικών πινάκων

Kenny McCormick · 12 Μαΐου 2018

Καλησπέρα σε μια εργασία που έχω θέλω αυτόν τον html κώδικα με Javascript να βγαίνει ο παράκατω πίνακας. Θέλω μια καθοδήγηση απλά στο από που να ξεκινήσω. (εάν υπάρχει κάτι παρόμοιο ώστε να διαβάσω ακόμη καλύτερα)

Πως επιλέγω π.χ. το 2 κελί ώστε να το μορφοποιήσω (getElementByTag) ; Ευχαριστώ προκαταβολικά ..

<table>
<thead>
<tr><td>Height</td><td>Score</td><td>Income</td><td>Age</td></tr>
</thead>
<tbody>
<tr><td>101</td><td>87.7</td><td>12000</td><td>29</td></tr>
<tr><td>220</td><td>97.1</td><td>10200</td><td>25</td></tr>
<tr><td>301</td><td>58.2</td><td>17100</td><td>31</td></tr>
<tr><td>421</td><td>34.4</td><td>13000</td><td>25</td></tr>
<tr><td>424</td><td>66.6</td><td>14500</td><td>35</td></tr>
</tbody>
<tfoot>
</tfoot>
</table>

The King · 12 Μαΐου 2018

To screenshot σου έχει CRUD (new, delete) αλλά και μαθηματικές λειτουργίες που εφαρμόζονται οριζόντια και κάθετα αντίστοιχα.

Kάνε λίγο πιο δεικτική την ερώτηση σου ως προς το screenshot, δηλαδή αρχικά τι θες να επιτύχεις μόνο. Τι εννοείς να μορφοποιήσεις το 2ο κελί; σε τι;

Επίσης θες στο τέλος να αυτοσυμπληρώνονται καθώς αλλάζεις τιμές πχ height columns => max, ή να πατάς κουμπί και να παίρνεις τα αποτέλεσματα (max,avg,med,mod)

Επεξ/σία 12 Μαΐου 2018 από The King

Kenny McCormick · 12 Μαΐου 2018

2 λεπτά πριν, The King είπε

To screenshot σου έχει CRUD (new, delete) αλλά και μαθηματικές λειτουργίες που εφαρμόζονται οριζόντια και κάθετα αντίστοιχα.

Kάνε λίγο πιο δεικτική την ερώτηση σου ως προς το screenshot, δηλαδή αρχικά τι θες να επιτύχεις μόνο. Τι εννοείς να μορφοποιήσεις το 2ο κελί; σε τι;

@The King έχεις δίκιο. Αυτά που θέλω να κάνει ο πίνακας είναι :

• Όταν γίνεται click σε κάποια από τις επικεφαλίδες των στηλών, θα ταξινομείται ο πίνακας με βάση εκείνη τη στήλη, τονίζοντάς την (π.χ.στήλη Height στο παρακάτω mockup).
• Όλα τα κελιά του πίνακα θα μετατρέπονται σε number inputs, έτσι ώστε να μπορεί ο χρήστης να αλλάζει το περιεχόμενό τους.
• Στο tfoot element του πίνακα θα προστίθεται ένα select/option element,από το οποίο ο χρήστης θα μπορεί να επιλέγει κάποια από τις ακόλουθες στατιστικές συναρτήσεις: Min, Max, Mean, Mode, Median, Range,Variance, StdDev (Standard Deviation). Κάτω από το select/option element θα εμφανίζεται το αποτέλεσμα της επιλεγείσας συνάρτησης για εκείνη τη στήλη. Εξυπακούεται ότι, οποτεδήποτε γίνεται αλλαγή στα δεδομένα του πίνακα, οι τιμές πρέπει να ενημερώνονται.
• Δίπλα σε κάθε γραμμή θα προστίθενται δύο εργαλεία: ένα για προσθήκη ενός αντιγράφου εκείνης της γραμμής και ένα για διαγραφή εκείνης της γραμμής.

Αυτό που ρωτάω για το 2 κελί είναι κάτι πολύ απλό λογικά (μιας και τώρα ξεκινάω με την JS) και λογικά αφορά το DOM πως το επιλέγω ώστε να του πω πχ να γίνει έντονο ή να το κάνω number input.

The King · 12 Μαΐου 2018

Ωραία, επειδή το έθεσες όμορφα στην αρχή ότι θες καθοδήγηση και όχι λύση θα σε βοηθήσω, αλλά ας πάρουμε τα πράγματα από την αρχή και να διαιρέσουμε το προβλημά σου σε κομμάτια.

Αρχικά θα κάνεις ωραίο indentation στον κωδικά σου αλλίως θα χάσεις τη μπάλα , ειδικά όταν παίζεις με table αλλά και γενικότερα

Αφού σπάσουμε το πρόβλημα, θα πάρουμε το πιο εύκολο κομμάτι από το οποίο προκύπτει το ερώτημα που γεννάται πως αρχικά θα ομαδοποιήσεις τα κάθετα κελιά ώστε στο tfoot να μπορείς να τα διαχειρίζεσαι μαθηματικά, ας πούμε μόνο max αρχικά.

Πως θα τα ομαδοποιήσεις; Με ένα class, οπότε το κάθε κελί που ανήκει πχ στην ομάδα Height θα του δώσεις το ίδιο class, ας πούμε .height

<table>
   <thead>
      <tr>
         <td>Height</td>
         <td>Score</td>
         <td>Income</td>
         <td>Age</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="height">101</td>
         <td class="score">87.7</td>
         <td class="income">12000</td>
         <td class="age">29</td>
      </tr>
      <tr>
         <td class="height">220</td>
         <td class="score">97.1</td>
         <td class="income">10200</td>
         <td class="age">25</td>
      </tr>
      <tr>
         <td class="height">301</td>
         <td class="score">58.2</td>
         <td class="income">17100</td>
         <td class="age">31</td>
      </tr>
      <tr>
         <td class="height">421</td>
         <td class="score">34.4</td>
         <td class="income">13000</td>
         <td class="age">25</td>
      </tr>
      <tr>
         <td class="height">424</td>
         <td class="score">66.6</td>
         <td class="income">14500</td>
         <td class="age">35</td>
      </tr>
   </tbody>
   <tfoot></tfoot>
</table>

.

Ποιά είναι η επόμενη σκέψη σου τώρα;

(υπάρχουν libs για τις λειτουργίες αντιγραφής/διαγραφής αλλά καλύτερα πρώτα να το κατανοήσεις αντί να το χρησιμοποιήσεις, θα φθάσουμε εκεί αργότερα)

.

Επεξ/σία 12 Μαΐου 2018 από The King

Kenny McCormick · 12 Μαΐου 2018

@The King ευχαριστώ και πάλι και εκτιμώ το χρόνο που αφιερώνεις για να απαντήσεις. Νομίζω έχω καταλάβει το σκεπτικό (έαν κάνω λάθος με διορθώνεις) ότι κάνοντας την ομαδοποίηση έτσι θα μπορούμε να προχωρήσουμε στη ταξινόμηση και τις μαθηματικές πράξεις που χρειάζονται ευκολότερα!

Φαντάζομαι η επόμενη κίνηση θα είναι να γίνουν τα κελιά αριθμητικά ώστε να μπορεί ο χρήστης να τα επεξεργάζεται και αργότερα να μπορούμε με τις libs ή τα methods που ανέφερες να τα κάνουμε sort.

**το πρόβλημα είναι ότι δεν μπορώ να πειράξω κατευθείαν τον html κώδικα και θα πρέπει να κάνω τα πάντα μόνο με JS

Έκανα ένα google search και είδα ότι μπορείς να κάνεις assign κλάσεων μέσω JS :

document.getElementByTag("td").className = "height";

Επεξ/σία 12 Μαΐου 2018 από Kenny McCormick

The King · 12 Μαΐου 2018

6 λεπτά πριν, Kenny McCormick είπε

**το πρόβλημα είναι ότι δεν μπορώ να πειράξω κατευθείαν τον html κώδικα και θα πρέπει να κάνω τα πάντα μόνο με JS

Αν δεν μπορείς να πειράξεις την HTML είτε για να ορίσεις classes είτε και για τα υπόλοιπα που πρέπει να γίνουν τότε δε μπορείς να κάνεις τίποτα.

Ακόμα κι αν μέσω JS κάνεις εύρεση του κελιού βάσει σειράς/στήλης και να χρησιμοποιήσεις τον κώδικα που μου έδειξες (ο οποίος όμως θα κάνει όλα τα κελία με .height class), μετά θα είναι πάλι άχρηστο για τα υπόλοιπα.

Γιατί δε μπορείς;

Επεξ/σία 12 Μαΐου 2018 από The King

Kenny McCormick · 12 Μαΐου 2018

1 λεπτό πριν, The King είπε

Γιατί δε μπορείς;

Γιατί μας είπε ότι θα παραδώσουμε μόνο ένα αρχείο .JS και πρέπει μ αυτό όταν το βάζει στο HTML αρχείο να γίνεται η μετατροπή του πίνακα από απλό σε δυναμικό.

Μας τόνισε ότι αυτό είναι εφικτό χρησιμοποιώντας μόνο JavaScript..

The King · 12 Μαΐου 2018

5 λεπτά πριν, Kenny McCormick είπε

Γιατί μας είπε ότι θα παραδώσουμε μόνο ένα αρχείο .JS και πρέπει μ αυτό όταν το βάζει στο HTML αρχείο να γίνεται η μετατροπή του πίνακα από απλό σε δυναμικό.

Μας τόνισε ότι αυτό είναι εφικτό χρησιμοποιώντας μόνο JavaScript..

οκ αν και μου φαίνεται παράξενο να σας δίνει τέτοια άσκηση όταν ακόμα δεν κατέχετε να το υλοποιήσετε manually.. η λογική παραμένει η ίδια, δηλαδή αρχικά πρέπει να ομαδοποιήσεις τα κελιά που αντιπροσωπεύουν την ίδια μονάδα μέτρησης, στην προκειμένη κάθετα.

Σας περιόρισε σε Vanilla JS ή μπορείς να χρησιμοποιήσεις και jQuery;

Επεξ/σία 12 Μαΐου 2018 από The King

Kenny McCormick · 12 Μαΐου 2018

Θέλουμε να κατασκευάσουμε μία (απλοϊκή) JavaScript βιβλιοθήκη διαμόρφωσης
αριθμητικών πινάκων. Συγκεκριμένα, θα προτείνουμε στο χρήστη απλά να
εισαγάγει τη γραμμή:
<script src="Tables.js"></script>
στο έγγραφο της HTML και, αν δώσει σε έναν πίνακα της HTML την κλάση
uomTable, αυτομάτως θα συμβαίνουν τα ακόλουθα:

Δεν αναφέρει κάτι στην εργασία αλλά επειδή δεν τα διδαχθήκαμε (Vanilla ή JQuery) λογικά θα πρέπει ο κώδικας να περιέχει αποκλειστικά Javascript (την απλή) .

Επεξ/σία 12 Μαΐου 2018 από Kenny McCormick

The King · 12 Μαΐου 2018

Οκ επειδή κάπου το χάσαμε, θα πάω μόνο στο ερώτημα που έθεσες στο 1ο μήνυμα παρακάμπτοντας τα υπόλοιπα της άσκησης που ανέφερες μετά και τα οποία προφανώς δε τα χρειάζεσαι επί της παρούσης.

1 ώρα πριν, Kenny McCormick είπε

Πως επιλέγω π.χ. το 2 κελί ώστε να το μορφοποιήσω (getElementByTag) ;

Έστω ότι θες να αλλάξεις μια τιμή σε cell στο παρακάτω table (χρήση jQuery lib)

Αναφορά σε κείμενο

Height Score Income Age

101 87.7 12000 29

220 97.1 10200 25

301 58.2 17100 31

421 34.4 13000 25

424 66.6 14500 35

.

Πχ το 13000 να το κάνεις 15000, το οποίο σε επίπεδο array βρίσκεται στο row 4 και στο column 2 ( η αρίθμηση αρχίζει από το 0 , στα rows πιάνει και τους τίτλους)

var row = 4;
var col = 2;

$('table tr:eq(' + row + ') td:eq(' + col + ')').html("15000");

Για την :eq σε παραπέμπω στο https://api.jquery.com/eq-selector/

Με την ίδια λογική προσθέτεις και classes ή μορφοποιείς σε επίπεδο styles και χρησιμοποιείς Loops αν θες να τα εφαρμόσεις μαζικά.

--

ΥΓ: δεν είδα το edit σου, VanillaJS σημαίνει plain JS, παρόλα αυτά η απάντηση μου κάνει χρήση jQuery, ούτως ή άλλως στο Title σου ήδη ζητάς κάποια βιβλιοθήκη της JavaScript.

Επεξ/σία 12 Μαΐου 2018 από The King

Kenny McCormick · 12 Μαΐου 2018

@The King ευχαριστώ και πάλι γράφω βιβλιοθήκη γιατί έτσι αναφέρει η άσκηση να δημιουργήσω βιβλιοθήκη την οποία όταν θα κάνει call ο χρήστης με το script να κάνει μορφοποίηση τον πίνακα..

Κάτι τέτοιο χρειάζομαι να χρησιμοποιήσω θα κάτσω να διαβάσω τα πάντα στο DOM μπας και βγάλω άκρη! Και πάλι ευχαριστώ για το χρόνο σου..

The King · 12 Μαΐου 2018

5 λεπτά πριν, Kenny McCormick είπε

Κάτι τέτοιο χρειάζομαι να χρησιμοποιήσω θα κάτσω να διαβάσω τα πάντα στο DOM μπας και βγάλω άκρη! Και πάλι ευχαριστώ για το χρόνο σου..

Aν κοιτάξεις το link που σου έδωσα, αναφέρει για το :eq ποιo document method αντιπροσωπεύει σε native dom, το οποίο δεν είναι άλλο από το .querySelectorAll()

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Διαβάζεις, καταλαβαίνεις, εφαρμόζεις το αντίστοιχο που σου έγραψα σε jQuery, είτε να τρέχει αυτόματα είτε μέσα από function.

Επεξ/σία 12 Μαΐου 2018 από The King

Fortistis · 12 Μαΐου 2018

1) Εφόσον πρέπει να είναι το συγκεκριμένο "script" σε HTML, τότε πρώτο task είναι να διαβάσεις τον HMTL code και να τον βάλεις σε js vars.

2) Μετά, θα πρέπει να βρεις πως μπορείς να αντικαταστήσεις τον HTML code με αυτόν που θα σε βολεύει.

3) Υλοποιείς τις λειτουργίες που ζητούνται

Εφόσον θα είναι συγκεκριμένος πίνακας, το task εύρεσης του HTML code που θα αντικαταστήσεις, γίνεται πιο εύκολο.

ajaxmonkey4hire · 13 Μαΐου 2018

<!doctype html>
<html>   
	<head>    
		<meta charset="utf-8"> 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<style>
			tbody>tr>td{cursor:pointer;}
		</style>
		<script>
			$(document).ready(function(){
				var oldValue = ''; 
				var current  = null;
				
				$('tbody>tr>td').hover(
					function(e){
						$('#status').html('Γραμμή: '+$(this).parent().attr('ref') + ', Στήλη: '+$(this).attr('ref'));					
					},
					function(e){
						$('#status').html('');
					}
				);
				
				$('tbody>tr>td').click(
					function(e){
						if ( !current ){
							current = $(this);
							oldValue= $(this).html();
							
							current.html('');
							current.append(
								$('<input type="text" value="'+oldValue+'">').keypress(function(e){
									if (e.which === 13){
										current.html($(this).val());
										current = null;
										
										return false;
									}
								})
							);
							current.find('input').focus();
						}					
					}
				);
				
			});
		
		</script>
	</head>
	<body>
		<table>
			<thead>
				<tr><td>Height</td><td>Score</td><td>Income</td><td>Age</td></tr>
			</thead>
			<tbody>
				<tr ref="1"><td ref="height">101</td><td ref="score">87.7</td><td ref="income">12000</td><td ref="age">29</td></tr>
				<tr ref="2"><td ref="height">220</td><td ref="score">97.1</td><td ref="income">10200</td><td ref="age">25</td></tr>
				<tr ref="3"><td ref="height">301</td><td ref="score">58.2</td><td ref="income">17100</td><td ref="age">31</td></tr>
				<tr ref="4"><td ref="height">421</td><td ref="score">34.4</td><td ref="income">13000</td><td ref="age">25</td></tr>
				<tr ref="5"><td ref="height">424</td><td ref="score">66.6</td><td ref="income">14500</td><td ref="age">35</td></tr>
			</tbody>
		</table>
		<br />
		<div id="status"></div>
	</body>
</html>

Δοκίμασε το : http://104.236.83.163/table.html

με click μπαίνεις στην επεξεργασία

με return βγαίνεις.

The King · 13 Μαΐου 2018

2 λεπτά πριν, ajaxmonkey4hire είπε


<!doctype html>
<html>   
	<head>    
		<meta charset="utf-8"> 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<style>
			tbody>tr>td{cursor:pointer;}
		</style>
		<script>
			$(document).ready(function(){
				var oldValue = ''; 
				var current  = null;
				
				$('tbody>tr>td').hover(
					function(e){
						$('#status').html('Γραμμή: '+$(this).parent().attr('ref') + ', Στήλη: '+$(this).attr('ref'));					
					},
					function(e){
						$('#status').html('');
					}
				);
				
				$('tbody>tr>td').click(
					function(e){
						if ( !current ){
							current = $(this);
							oldValue= $(this).html();
							
							current.html('');
							current.append(
								$('<input type="text" value="'+oldValue+'">').keypress(function(e){
									if (e.which === 13){
										current.html($(this).val());
										current = null;
										
										return false;
									}
								})
							);
							current.find('input').focus();
						}					
					}
				);
				
			});
		
		</script>
	</head>
	<body>
		<table>
			<thead>
				<tr><td>Height</td><td>Score</td><td>Income</td><td>Age</td></tr>
			</thead>
			<tbody>
				<tr ref="1"><td ref="height">101</td><td ref="score">87.7</td><td ref="income">12000</td><td ref="age">29</td></tr>
				<tr ref="2"><td ref="height">220</td><td ref="score">97.1</td><td ref="income">10200</td><td ref="age">25</td></tr>
				<tr ref="3"><td ref="height">301</td><td ref="score">58.2</td><td ref="income">17100</td><td ref="age">31</td></tr>
				<tr ref="4"><td ref="height">421</td><td ref="score">34.4</td><td ref="income">13000</td><td ref="age">25</td></tr>
				<tr ref="5"><td ref="height">424</td><td ref="score">66.6</td><td ref="income">14500</td><td ref="age">35</td></tr>
			</tbody>
		</table>
		<br />
		<div id="status"></div>
	</body>
</html>

Δοκίμασε το : http://104.236.83.163/table.html

με click μπαίνεις στην επεξεργασία

με return βγαίνεις.

Χάνεις το χρόνο σου και εσύ, μετά από 4-5 replies αναφέρει ότι δεν του επιτρέπεται να πειράξει την HTML που παρέθεσε, επίσης δε μπορεί να χρησιμοποιήσει libs όπως jQuery (αντιθέτως με τι ζητάει στο topic του) ..

Επεξ/σία 13 Μαΐου 2018 από The King

Σύνδεση

JavaScript βιβλιοθήκη διαμόρφωσης αριθμητικών πινάκων

Προτεινόμενες αναρτήσεις

Kenny McCormick

The King

Kenny McCormick

The King

Kenny McCormick

The King

Kenny McCormick

The King

Kenny McCormick

The King

Kenny McCormick

The King

Fortistis

ajaxmonkey4hire

The King

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση

Height	Score	Income	Age
101	87.7	12000	29
220	97.1	10200	25
301	58.2	17100	31
421	34.4	13000	25
424	66.6	14500	35