Maison > interface Web > js tutoriel > Un exemple simple d'obtention du contenu de chaque tr et td du nœud de table en js

Un exemple simple d'obtention du contenu de chaque tr et td du nœud de table en js

高洛峰
Libérer: 2016-12-29 16:21:16
original
1167 Les gens l'ont consulté

<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0">
    <tr>
        <td height="25">第一行</td>
    </tr>
    <tr>
        <td height="25">第二行</td>
    </tr>
    <tr>
        <td height="25">第三行</td>
    </tr>
    <tr>
        <td height="25">第四行</td>
    </tr>
         <tr>
        <td height="25"><input type="button" name="getTableContent" value="获得表格内容" onclick="getTableContent(this)"></td>
    </tr>
</table>
Copier après la connexion

Comme le montre le code ci-dessus, l'objet this est passé dans l'événement de clic sur le bouton, et cet objet est le bouton lui-même. Utilisez la méthode suivante pour tester les données de la table

<script language="javascript">
    function getTableContent(node) {
// 按钮的父节点的父节点是tr。
          var tr1 = node.parentNode.parentNode;
            alert(tr1.rowIndex);
            alert(tr1.cells[0].childNodes[0].value); //获取的方法一
alert(tr1.cells[0].innerText); 
// 通过以下方式找到table对象,在获取tr,td。然后获取td的html内容
        var table = document.getElementById("tb1");//获取第一个表格
         
        var child = table.getElementsByTagName("tr")[rowIndex - 1];//获取行的第一个单元格
                 
        var text = child.firstChild.innerHTML;
        window.alert("表格第" + rowIndex + "的内容为: " + text);
    }
</script>
Copier après la connexion

Ce ci-dessus est l'exemple simple d'obtention du contenu de chaque tr et td du nœud de table en js apporté par l'éditeur, j'espère que tout le monde le fera. prend en charge le site Web PHP chinois. ~

Pour des exemples plus simples d'obtention du contenu de chaque tr et td de nœuds de table en js, veuillez faire attention au site Web PHP chinois pour les articles connexes !


É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