jQuery obtenir de l'en-tête du tableau nom de cliqué sur la cellule avec l'id

J'ai une table, et, dans ce tableau, j'ai des valeurs avec id="edit". Maintenant, ce que je veux est d'obtenir le nom d'en-tête de la colonne correspondante lorsque je clique sur une des cellules. Ce que j'ai à ce jour, basée sur une précédente question posée est la suivante:

$('body').on('click', 'td#edit', function() {  
    var th = $('this').closest('th').eq($('th').val());
    alert(th);        //returns [object Object]
    .........................
}

Pouvez-vous m'aider avec ça?

HTML:

<table id="myTable" class="myTable">
<tbody>
    <tr>
        <th>Select</th>
        <th>JobNo</th>
        <th>Customer</th>
        <th>JobDate</th>
        <th>Warranty</th>
        <th>RepairStatus</th>
        <th>POP</th>
        <th>DOA</th>
        <th>Model</th>
        <th>SN</th>
    </tr>
    <tr>
        <td class="check">
            <input type="checkbox" value="12345">
        </td>
        <td class="edit">
            <b>12345</b>
        </td>
        <td class="edit">gdsgasdfasfasdfa</td>
        <td class="edit">2011-01-21</td>
        <td class="edit">TRUE</td>
        <td class="edit">RP</td>
        <td class="edit">FALSE</td>
        <td class="edit">0</td>
        <td class="edit">5152342</td>
        <td class="edit">66665464</td>
    </tr>
</tbody>

Vous ne devriez pas avoir values avec id=edit l'id doit être unique
Êtes-vous en utilisant le même id plusieurs fois? Vous avez écrit que vous avez de la valeurs avec id="edit". Id doit être unique
qu'est-ce que le HTML balisage..??
"id" doit être unique toujours. Vous ne pouvez pas donner id="modifier" à tous les td.
Si c'est une classe ou un id, il ne résout pas mon problème. Ce n'était pas la question que j'avais posée

OriginalL'auteur vulkoingim | 2013-03-19

11

La fonction plus proche (le) boucle dans les ancêtres jusqu'à la DOM de l'arbre et de la th n'est pas parent de td, donc plus proche n'est pas une bonne option. Tout d'abord, utilisez la classe si vous rencontrez le même id pour plus d'un des éléments. Deuxièmement, l'utilisation de l'index() pour trouver le correspondant th de td. Pour être précis attribuer id à table parent, de sorte que le script ne fonctionne pas sur d'autres tables /td sur la page.

Démonstration En Direct

Html
```
<table id="tbl1" border="1">
    <tr>
        <th>heading 1</th>
        <th>heading 2</th>
    </tr>
    <tr>
        <td class="edit">row 1, cell 1</td>
        <td class="edit">row 1, cell 2</td>
    </tr>
    <tr>
        <td class="edit">row 2, cell 1</td>
        <td class="edit">row 2, cell 2</td>
    </tr>
</table>
```
Javascript
```
$('#tbl1').on('click', '.edit', function () {
    var th = $('#tbl1 th').eq($(this).index());
    alert(th.text()); //returns text of respective header
});
```
Cela fonctionne, mais renvoie mauvaise tête, et toujours le même. Je vais mettre à jour ma question avec les balises HTML.
Vérifier mes mises à jour de réponse.
Les travaux de cette. Mais je tiens à vous harceler avec un plus de plus 🙂 Depuis le tableau est chargé avec de l'Ajax j'ai besoin de la $('body').on('click', '.edit', function() { pour enregistrer les événements correctement. Quand j'ai mis ton code à l'intérieur de cette fonction, les boucles de +1 à chaque fois. Alors, quand je clique sur la première fois que je reçois JobNo , 2ème fois que je reçois JobNo \n JobNo et ainsi de suite....comment puis-je régler ce problème?
Pouvez-vous faire un violon?
Vous avez besoin de déléguer l'événement à l'élément qui est présent à l'époque sur est utilisée pour lier, depuis votre table n'existe pas, il ne se lie pas, vous pouvez lier au plus proche parent ou d'un document ou d'un document.corps, vérifiez ici, jsfiddle.net/cFWtu/2

OriginalL'auteur Adil

Pour ce balisage

<table>
    <tr class="header">
        <th>Header One</th>
        <th>Header Two</th>
        <th>Header Three</th>
    </tr>
    <tr>
        <td class="edit">One</td>
        <td class="edit">Two</td>
        <td class="edit">Three</td>
    </tr>
    <tr>
        <td class="edit">One</td>
        <td class="edit">Two</td>
        <td class="edit">Three</td>
    </tr>
</table>

Vous pouvez utiliser ce code jQuery:

$(".mytable").on('click', 'td.edit', function(e) {
    var index = $(this).index();
    var table = $(this).closest('table');
    console.log(table.find('.header th').eq(index).text());  //returns the header text  
});

Violon ici: http://jsfiddle.net/7qXm8/

OriginalL'auteur Vishal

Vous devez vous connecter pour publier un commentaire.