Maison > Article > interface Web > Trois façons d'obtenir tr td en JavaScript (tutoriel graphique)

Trois façons d'obtenir tr td en JavaScript (tutoriel graphique)

亚连original: 2018-05-19 09:39:583976parcourir

Cet article présente principalement trois façons d'obtenir tr td via JavaScript. Vous pouvez consulter l'explication détaillée ci-dessous pour les étapes de fonctionnement spécifiques. Les amis intéressés peuvent s'y référer.

/* Le premier, js natif, récupère d'abord la table puis la balise tr, puis traverse le td */

//     $(&#39;#selectIds&#39;).val("");
//      var table = document.getElementById("tb_table");//获取第一个表格 
//      var array = table.getElementsByTagName("tr");//所有tr
//      for(var i = 1; i < array.length; i++) {
//       var id = array[i].children;
//       var idtext = id[1].innerHTML;
//       if(i == 1){
//         $(&#39;#selectIds&#39;).val($(&#39;#selectIds&#39;).val() + "" + idtext); 
//       }else{
//         $(&#39;#selectIds&#39;).val($(&#39;#selectIds&#39;).val() + "," + idtext);
//       }
//       }

/* La manière d'écrire jQuery, obtient le tr puis parcourez tous les td. Notez que la valeur obtenue par td est .text(); */

//   $(&#39;#selectIds&#39;).val("");
//   var isFirst = true;
//    $("#tb_table").find("tr").each(function(){
//      var tdArr = $(this).children();
//      var idtext = tdArr.eq(1).text();
//      if(idtext != &#39;人员ID&#39;){
//        if(isFirst){
//        $(&#39;#selectIds&#39;).val($(&#39;#selectIds&#39;).val() + "" + idtext); 
//        isFirst = false
//        }else{
//          $(&#39;#selectIds&#39;).val($(&#39;#selectIds&#39;).val() + "," + idtext);
//        }
//      console.log("idtext",idtext);
//      }
//    })

/* Native js récupère toutes les lignes, puis récupère chaque cellule*/

//   var table = document.getElementById("tb_table");
//   var rows = table.rows;//获取所有行
//   console.log("lenth",rows.length) //
//   for(var i=1; i < rows.length; i++){
//     var row = rows[i];//获取每一行
//     var id = row.cells[1].innerHTML;//获取具体单元格
//     console.log("id",id)
//   }

Résumé :

$(this).children().eq(1).text() obtient la valeur affichée

$(this). children().eq(1).html() récupère tout le contenu entre b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf

$('.trSelected',grid).find("td" ).eq (7).text(); obtient le contenu d'une ligne sélectionnée

Valeur du paramètre : $('.trSelected',grid).find("td").eq(7) .text('' Set content'')

xxx.innerHTML; est la valeur de l'objet obtenu en js.

Parcourir la table

$("#grid tr").each(function() {
alert ($(this).children ( ).eq(1).text());
});

Utilisez JavaScript pour parcourir

function load(){
   var tab=document.getElementById("grid");
   var rows=tab.rows;
   alert(rows.length);
   for(var i=0;i<rows.length;i++)
   {
    for(var j=0;j<rows[i].cells.length;j++)
    {
    alert("第"+(i+1)+"行，第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
    }
   }
  }

Ce qui précède est ce pour quoi j'ai compilé tout le monde Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Explication détaillée des étapes de la fonction d'effet de fondu d'entrée et de sortie de l'encapsulation JS native

JS génère une liste de temps et la génère

angularjsExplication détaillée des cas d'utilisation de la mise en cache personnalisée

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!

Déclaration：

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

Article précédent：Cocher tout la case Écriture JavaScript (tutoriel graphique)Article suivant：Cocher tout la case Écriture JavaScript (tutoriel graphique)

Articles Liés

Voir plus