Maison > interface Web > js tutoriel > Utilisez jquery pour obtenir la balise td dans le tableau

Utilisez jquery pour obtenir la balise td dans le tableau

炎欲天舞
Libérer: 2017-08-04 14:16:46
original
1474 Les gens l'ont consulté

Tout d'abord, permettez-moi de vous présenter les problèmes que j'ai rencontrés

1 Lorsqu'un tableau contient des balises et , cela peut être grossièrement considéré comme suit :


<tr>
        <td>
            @scene.ID        
        </td>
        <td>
            @scene.SceneName        
        </td>
        <td>
            @scene.QRUrl        
        </td>
        <td>
            @scene.LocalUrl        
        </td>
        <td>
            <!--如果有图片,展示图片,没有图片生成图片-->
            <!--判断localUrl(本地服务器路径)是否为空,如果为空,表示没有生成,如果不为空表示已经生成-->
            @if (!string.IsNullOrWhiteSpace(scene.LocalUrl))
            {                
                <!--图片不为空,展示图片地址-->
                <img src="@scene.LocalUrl" style="width:200px; height:100px"/>
            }
            else
            {           
                <!--图片为空,生成图片-->
                <a sceneid="@scene.ID" href="#" onclick="build(this);">生成</a>
            }        
        </td>
</tr>
Copier après la connexion

2. Il y a un événement onclick ici. Tout ce que j'ai à faire est de cliquer sur le lien "Générer" et de trouver la balise td> de LocalUrl. Tag

Nous cliquons d'abord sur cette balise pour exécuter l'événement click dans jQuery

function build(sender){ var jqSender = $(sender); l'objet js est passé via $( ) est converti en un objet jquery et le contenu suivant est placé entre les deux "+".

var sceneid = jqSender.attr('sceneid'); //attr peut trouver la valeur de l'attribut de l'objet

J'ai besoin d'obtenir la balise td. Je dois d'abord savoir sur quelle ligne elle se trouve. C'est la même chose que le positionnement. Par exemple : il y a la route n°1 de Nanjing à Pékin, et il y a la route n°1 de Nanjing à Chengdu. Vous me demandez où je suis, et je vous dis que je suis au n°1 de la route de Nanjing. Je suis sûr que je sois à Pékin ou à Chengdu, donc nous devrions Pour localiser, disons que nous sommes au n°1 de Nanjing Road, Chengdu.

Il est préférable d'utiliser eq() pour obtenir une certaine ligne ici. Si le code de la page doit être modifié, cela sera très gênant. Par exemple, si vous voulez vous rappeler où se trouve ma maison, ce que vous devez connaître, c'est la rue et le numéro de la maison. Vous savez seulement que la première maison de cette rue est ma maison. Si quelqu'un d'autre ajoute une nouvelle maison ici, ce sera le cas. pas la première maison. (L’analogie est un peu inappropriée, mais les ordinateurs sont si rigides).

Donc, nous définissons un identifiant pour ce tr et une classe pour QRUrl et LocalUrl. Le code est le suivant :


    <tr sceneid="@scene.ID">
        <td>
            @scene.ID        
        </td>
        <td>
            @scene.SceneName        
        </td>
        <td class="wxurl-col">
            @scene.QRUrl        
        </td>
        <td class="localurl-col">
            @scene.LocalUrl        
        </td>
        <td>
            <!--如果有图片,展示图片,没有图片生成图片-->
            <!--判断localUrl(本地服务器路径)是否为空,如果为空,表示没有生成,如果不为空表示已经生成-->
            @if (!string.IsNullOrWhiteSpace(scene.LocalUrl))
            {         
                <!--图片不为空,展示图片地址-->
                <img src="@scene.LocalUrl" style="width:200px; height:100px"/>
            }
            else
            {          
                <!--图片为空,生成图片-->
                <a sceneid="@scene.ID" href="#" onclick="build(this);">生成</a>
            }        
         </td>
    </tr>
Copier après la connexion

Puis dans jQuery. Vous pouvez le trouver comme ceci :


<script type="text/javascript">
    function build(sender) {    
        var jqSender = $(sender);   
        var sceneid = jqSender.attr(&#39;sceneid&#39;);        
        //找到指定行类名为wxurl-col的td标签
        $(&#39;tbody tr[sceneid=&#39; + sceneid + &#39;] td.wxurl-col&#39;)        
        //找到指定行类名为localurl-col的td标签
        $(&#39;tbody tr[sceneid=&#39; + sceneid + &#39;] td.localurl-col&#39;)        
        //找到点击事件的a标签        
        jqSender
     }
</script>
Copier après la connexion

la balise td est uniquement trouvée mais non utilisée.

La méthode est comme ceci, ajoutez des "coordonnées" à l'élément, pourquoi sont-ils respectivement l'identifiant et le nom de la classe ? Tout d'abord, il y a plusieurs lignes. La seule façon de le déterminer de manière unique est d'ajouter un identifiant. Lorsque la ligne est déterminée, la colonne peut être soit id, soit class, il est recommandé d'utiliser class pour faciliter la gestion de nos css

Remarque : cet article est à titre de référence uniquement, et il y a beaucoup de petits défauts. Le plus important n'est pas le code, c'est la logique qui compte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal