Πληροφοριες κελιου στο onclick γραμμης πινακα

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

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

Απάντηση
Άβαταρ μέλους
loxy
Δημοσιεύσεις: 208
Εγγραφή: 17 Ιούλ 2007 01:18

Πληροφοριες κελιου στο onclick γραμμης πινακα

Δημοσίευση από loxy » 27 Ιουν 2010 14:00

Καλημέρα σας.

Έχω ένα θεματάκι, που αν και το έψαξα, δεν έβγαλα μεγάλη άκρη.

Έχω ένα πίνακα με πολλές ( πάνω από 500 ) εγγραφές και 5 στήλες.

Αυτό που θέλω να γίνεται , είναι στο onclick σε οποιοδήποτε σημείο μίας γραμμής (εγγραφής) του πίνακα,να εμφανίζεται σε alert box το περιεχόμενο του πεδίου ID.

Απαιτείται jQuery ή απλή Javascript ;

Κάποια ιδέα/καθοδήγηση;

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

Πληροφοριες κελιου στο onclick γραμμης πινακα

Δημοσίευση από korgr » 27 Ιουν 2010 14:16

Απλη javascript.
Η λογικη ειναι να δινεις το περιεχομενο του πεδιου id ως dom id στο <tr>
πχ για μια εγγραφη που εχεις σαν id το 123:

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

<table>
<tr id="123" onclick="alert&#40;this.id&#41;"><td>123</td></tr>
</table>

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

Πληροφοριες κελιου στο onclick γραμμης πινακα

Δημοσίευση από nbc » 27 Ιουν 2010 14:33

Ή, για να μην έχεις 500 inline events, και 100% clean markup και unobtrusive js με 1 και μόνο event handler για όλο το table.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Test</title>

    <script type="text/javascript" src="http&#58;//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        jQuery&#40;function&#40;$&#41;
        &#123;
            $&#40;"table.test tbody"&#41;.click&#40;function&#40;e&#41;
            &#123;
                var  td = e.target;
                var $tr = $&#40;td&#41;.closest&#40;'tr'&#41;;
                var $id = $tr.children&#40;0&#41;;

                alert&#40;$id.html&#40;&#41;&#41;;
            &#125;&#41;;
        &#125;&#41;;
    </script>
</head>

<body>

<table class="test">
    <tr><td>r1c1</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td></tr>
    <tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td></tr>
    <tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td></tr>
    <tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td></tr>
    <tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td></tr>
</table>

</body>

</html>
Άλλαξε το 0 με το column number που περιέχει το id.

Άβαταρ μέλους
loxy
Δημοσιεύσεις: 208
Εγγραφή: 17 Ιούλ 2007 01:18

Πληροφοριες κελιου στο onclick γραμμης πινακα

Δημοσίευση από loxy » 27 Ιουν 2010 15:11

Πολύ ωραιές λύσεις και οι δύο.
Απλώς στου korgr , θα πρέπει να δώσω δυναμικά το id σε κάθε εγγραφή.

Ευχαριστώ και τους δύο. :)

Απάντηση

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

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

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