Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από alou » 18 Μαρ 2011 18:03

Καλησπέρα, θα εκτιμούσα μια βοήθεια να ξεκολήσωσε κάτι που προσπαθώ...

Σε μια σελίδα, υπάρχει μέσα σε ένα div id=idnumber ένα νούμερο που προστίθεται δυναμικά με php. Από κάτω υπάρχει ένας πίνακας, ψιλοτεράστιος, το πρώτο td σε κάθε tr του οποίου προσπαθώ να συσχετίσω με το περιεχόμενο του div id=idnumber ώστε να κρύψω ή να εμφανίσω ανάλογα τη συγκεκριμένη σειρά, δηλαδή η σειρά παραμένει display:none (που ορίζεται από css) ή γίνεται (θα ήθελα) display:block με βάση το περιεχόμενο του πρώτου κελιού της.

Κώδικας: Επιλογή όλων

enaNoumero = $('.idnumber').html(); //η μεταβλητή για να συγκρίνω μετά το περιεχόμενο των πρώτων td σε κάθε tr

$(document).ready(function() {
$('tr td:nth-child(1)').each( function() {	
    if ($(this).html() == enaNoumero) {  //θέλω να συγκρίνω το περιεχόμενο του πρώτου td με τη μεταβλητή 
(...το tr που ανήκει το συγκεκριμένο td - με τι μέθοδο να το διαλέξω;) .css('display', 'block')
	}
  })
Καμμιά ιδέα;

θενκς.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από fafos » 18 Μαρ 2011 19:59

den polykatalava ti thes na kaneis alla, zhtas na emfanizeis panta to proto tr h yparxei periptosh na einai kai kapoio allo tr parakato?
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από korgr » 18 Μαρ 2011 20:14

Όχι το tr
Το πρώτο td κάθε σειράς ανάλογα το περιεχόμενο του αν κατάλαβα καλά...

edit:
Όχι λάθος, την σειρά

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από fafos » 18 Μαρ 2011 20:44

mperdeway h katastash :lol:

pantos an thes to na deixnei to idio tr me auto pou antistoixei sto td child kaneis auto:

Κώδικας: Επιλογή όλων

<script>
var enaNoumero = 5;// evala ena noumero
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;

$&#40;"tr"&#41;.hide&#40;&#41;;//kryvo ola ta tr
$&#40;'td&#58;nth-child&#40;n&#41;'&#41;.each&#40; function&#40;&#41; &#123;  

if &#40;$&#40;this&#41;.html&#40;&#41; == enaNoumero&#41; &#123; 
var RowIndex =$&#40;this&#41;.parent&#40;&#41;.parent&#40;&#41;.children&#40;&#41;.index&#40;$&#40;this&#41;.parent&#40;&#41;&#41; +1;//pairno to child num tou tr pou antistoixei sto td pou periexei auto to tr

$&#40;"tr&#58;nth-child&#40;"+RowIndex+"&#41;"&#41;.addClass&#40;"showtr"&#41;;//tou leo na valei thn class "showtr" se auto to tr

$&#40;".showtr"&#41;.css&#40;'display', 'block'&#41;; // tou leo na emfanisei to-ta tr me thn class "showtr" 
&#125;

&#125;&#41;;
  &#125;&#41;;</script>
<style type="text/css">
<!--
#div&#123;
  font-weight &#58; bold;
&#125;
-->
</style>



<div class="idnumber">
<table border="1">

    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>

</table>
</div>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από alou » 18 Μαρ 2011 22:28

fafos θενκς αλλά εδω σε έχασα
var RowIndex =$(this).parent().parent().children().index($(this).parent()) +1;//pairno to child num tou tr pou antistoixei sto td pou periexei auto to tr
και επειδή δεν δούλεψε όπως το έγραψες και είναι όντως μπερδεγουέη, θα προσπαθήσω να το πω λίγο πιο όμορφα :

Κώδικας: Επιλογή όλων

<div id="idnumber">3</div>

<table border="1">

    <tr>
      <td>1</td><td>asdf</td><td>asdf</td>  --->display&#58;none
    </tr>
    <tr>
      <td>2</td><td>asdf</td><td>asdf</td>  --->display&#58;none
    </tr>
    <tr>
      <td>3</td><td>asdf</td><td>asdf</td>  --->display&#58;block γιατί το πρώτο td του είναι ίδιο με το νούμερο που περιέχεται στο #idnumber
    </tr>
    <tr>
      <td>4</td><td>asdf</td><td>asdf</td>  --->display&#58;none
    </tr>
    <tr>
      <td>5</td><td>asdf</td><td>asdf</td>  --->display&#58;none
    </tr>
</table> 

Εκείνο που θέλω δηλαδή είναι να κρυφτούν όλα τα tr εκτός από αυτά (παραπάνω από ένα) που το πρώτο td τους έχει το ίδιο νούμερο με το νούμερο που υπάρχει στο div id="idnumber"

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από fafos » 18 Μαρ 2011 22:55

katarxas exeis lathos to enaNoumero = $('.idnumber').html();

des auto: http://istopoli.com/tuts/tr.php?n=3 (opou n=3 vazeis enan arithmo apo to 1-5)

to var RowIndex =$(this).parent().parent().children().index($(this).parent()) +1; pairnei to noumero (se poia thesh einai dhladh) apo to analogo tr opou einai mesa to td kai prosthetei thn analogh class... to +1 to vazo dioti h function xekina apo to 0 (mhden)..

akoma kai an anakatepseis ta noumera (opos exo kanei ego sto paradeigma) to script tha deixei to analogo tr kai tha krypsei ta ypoloipa..

kane dexi click sto demo mou kai des ton kodika...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από ThyClub » 18 Μαρ 2011 23:31

Κώδικας: Επιλογή όλων

<html>
<title>Row Eraser</title>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
	
    $&#40;"#idnumber"&#41;.click&#40;function&#40;&#41;&#123;
	var therow;
			$&#40;"td"&#41;.each&#40;function&#40;i,value&#41;&#123;
				
				if&#40;value.innerHTML==$&#40;"#idnumber"&#41;.html&#40;&#41;&#41;&#123;
					therow = $&#40;this&#41;.parent&#40;'tr'&#41;;
				&#125;
				
			&#125;&#41;;
			$&#40;"tr"&#41;.css&#40;'display','none'&#41;;
			therow.css&#40;'display','block'&#41;;
		&#125;&#41;;
	&#125;&#41;;
</script>
<body>
<div id="idnumber">3</div>

<table border="1">

    <tr>
      <td>1</td><td>asdf</td><td>asdf</td>  
    </tr>
    <tr>
      <td>2</td><td>asdf</td><td>asdf</td>  
    </tr>
    <tr>
      <td>3</td><td>asdf</td><td>asdf</td>  
    </tr>
    <tr>
      <td>4</td><td>asdf</td><td>asdf</td> 
    </tr>
    <tr>
      <td>5</td><td>asdf</td><td>asdf</td> 
    </tr>
</table>

</div>
</body>
</html>

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από fafos » 18 Μαρ 2011 23:40

sosto kai auto arkei na mhn vrei parakato allo td me ton idio arithmo..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από ThyClub » 18 Μαρ 2011 23:47

Ναι!
Άρα θα χρειαστεί να βάλει ενα addClass στο tr που βρίσκει και μετα να παίξει με css. Σωστος

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από fafos » 18 Μαρ 2011 23:52

ThyClub έγραψε:Ναι!
Άρα θα χρειαστεί να βάλει ενα addClass στο tr που βρίσκει και μετα να παίξει με css. Σωστος

me to class tha tou emfanizei ola ta tr pou tha periexoun ton arithmo 3 se kapoio td... autos thelei mono ta tr opou to proto td exei ton arithmo 3..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από greekbytes » 19 Μαρ 2011 00:15

Εγώ θα το έκανα κάπως έτσι: (αν κατάλαβα καλά)

Κώδικας: Επιλογή όλων

<html>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$&#40;function&#40;&#41;&#123;
	$&#40;"#go"&#41;.click&#40;function&#40;&#41;&#123;
		var the_number = $&#40;'#idnumber'&#41;.val&#40;&#41;; // $&#40;"#idnumber"&#41;.html&#40;&#41; gia to pareis apo to div
		$&#40;'table#the_table tr'&#41;.hide&#40;&#41;;
		$&#40;'table#the_table tr'&#41;.each&#40;function&#40;index&#41;&#123;
			if&#40;$&#40;'td&#58;first', this&#41;.html&#40;&#41;==the_number&#41;&#123;
				$&#40;this&#41;.show&#40;&#41;;
			&#125;
		&#125;&#41;;
	&#125;&#41;;
&#125;&#41;;
</script>
<body>

<table border="1" id="the_table">
	<tr>
		<td>1</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>2</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>3</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>4</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>5</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>1</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>2</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>3</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>4</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>5</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>6</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>7</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
	<tr>
		<td>8</td><td>lorem ipsum</td><td>dolor sit</td> 
	</tr>
</table>

<br />
<input type="text" id="idnumber" value="3" />
<button id="go">Go</button>

</body>
</html> 

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από alou » 19 Μαρ 2011 08:09

Παιδιά ευχαριστώ πολύ για τις απαντήσεις, θα το κοιτάξω και θα επανέλθω :reading:

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Jquery - κρύψιμο tr με βάση το περιεχόμενο του πρώτου td

Δημοσίευση από alou » 21 Μαρ 2011 10:22

Παιδιά ευχαριστώ πολύ, τελικά αν και δεν ήταν το αρχικό ζητούμενο χρησιμοποίησα τον τρόπο του greekbytes γιατί συνδύασα και κάτι άλλο με το input box, πάντως και ο τρόπος του fafos ήταν (φυσικά) μια χαρά.

Ευχαριστώ και πάλι :)

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες