J'ai un bloc de code comme ci-dessous

<tbody class="society_list">
    <tr>
        <td>1</td>
        <td>Dummy</td>
        <td>Dummy</td>
        <td id="lol0">UPDATE THIS</td>
    </tr>
    <tr>
        .....
    </tr>
</tbody>

Ce que je veux faire, c'est parcourir la table entière, trouver le td avec un id, obtenir la valeur de cet id, puis mettre à jour le html à l'intérieur. Ce que j'ai pour l'instant (désolé je suis assez nouveau et je n'ai toujours pas beaucoup d'idée quoi faire ...)

function update(){
  var trs = document.querySelectorAll('.society_list tr');
  for(i=0;i<trs.length-1;i++){
    trs[i].find('td').each(function(){
      //I know I need to do something here but what's that.. 
    });
  }
}
0
Yiyue Wang 14 juil. 2015 à 05:57

5 réponses

Meilleure réponse

Parcourez les tds qui ont l'attribut id à l'aide du a sélecteur d'attribut.

$('.society_list tr td[id]').each(function(){
  var tdID = $(this).attr('id'); // <--- getting the ID here
  var result = doSomeMagicWithId(tdID); // <--- doing something
  $(this).html(result);  // <---- updating the HTML inside the td
});
6
Dhiraj 14 juil. 2015 à 03:13

Voici une version JavaScript simple:

   var os=document.getElementsByTagName('td');
    for (var i=0;i<os.length;i++){
      var o=os[i];
      if (o.id){
        o.innerHTML="updated "+o.id;
      }
    }

Je suis fatigué de l'argument selon lequel jQuery est vraiment simple. Bien sous le capot, il doit toujours correspondre à tous les éléments DOM. Une certaine forme d'itération a toujours lieu. La version JavaScript simple n'est pas si mauvaise et ne cache pas la complexité. Et il fonctionne dans tous les navigateurs, y compris les versions IE que les gens de jQuery jugent «non pertinents».

1
Schien 14 juil. 2015 à 03:09
function addRow(tableID,index) 
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;    
    
	var row = table.insertRow(rowCount);

	row.style.backgroundColor = "#FEF0FF";
	rowCount = rowCount-1;

	

	//row.id = "tr_add"+rowCount;
	var cell1 		= row.insertCell(0);
	cell1.style.backgroundColor = "red";
	cell1.style.align ="center";
	var element1 	= document.createElement("input");
	element1.id  	= "chk"+(rowCount);
	element1.name  	= "chk"+(rowCount);
	element1.type 	= "checkbox";
	//element1.style.textAlign="center";
	var element111 	= document.createElement("input");
	element111.id  	= "chkbox"+(rowCount);
	element111.name = "chkbox"+(rowCount);
	element111.type = "hidden";
    
    var element112 	= document.createElement("input");
	element112.id  	= "textCopy"+(rowCount);
	element112.name = "textCopy"+(rowCount);
	element112.type = "hidden";
	element112.value ="COPY";
	//cell1.innerHTML	= "COPY";
    
    cell1.appendChild(element1);
    cell1.appendChild(element111);
    cell1.appendChild(element112);
    cell1.style.textAlign="center";
    }
function addRow(tableID,index) 
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;    
    
	var row = table.insertRow(rowCount);

	row.style.backgroundColor = "#FEF0FF";
	rowCount = rowCount-1;

	

	//row.id = "tr_add"+rowCount;
	var cell1 		= row.insertCell(0);
	//cell1.style.backgroundColor = "red";
	//cell1.style.align ="center";
	var element1 	= document.createElement("input");
	element1.id  	= "chk"+(rowCount);
	element1.name  	= "chk"+(rowCount);
	element1.type 	= "checkbox";
	//element1.style.textAlign="center";
	var element111 	= document.createElement("input");
	element111.id  	= "chkbox"+(rowCount);
	element111.name = "chkbox"+(rowCount);
	element111.type = "hidden";
    
    var element112 	= document.createElement("input");
	element112.id  	= "textCopy"+(rowCount);
	element112.name = "textCopy"+(rowCount);
	element112.type = "hidden";
	element112.value ="COPY";
	//cell1.innerHTML	= "COPY";
    
    cell1.appendChild(element1);
    cell1.appendChild(element111);
    cell1.appendChild(element112);
    cell1.style.textAlign="center";
  
  document.getElementById('hdRowCount').value = rowCount+1;
    document.getElementById('btnCopy'+rowCount).onclick = function(){addRow('tableToModify',rowCount);}; 
  
    }
<table>
  <tr>
     <td>
       <button type="button" name="btnCopy<%=i%>" id="btnCopy<%=i%>" value="Copy" onclick="addRow('tableToModify','<%=i%>');">Copy</button>  
    
    </td>
  </tr>
</table>
0
Cherryishappy 14 juil. 2015 à 04:06

Si vous connaissez l'attribut id, vous n'avez pas besoin de parcourir la table. Avec jQuery c'est si simple:

$('#lol0').text('What you want');

OU:

$('#lol0').html('What you want');

DEMO

1
lmgonzalves 14 juil. 2015 à 03:12

Compagnon essayez d'utiliser

$('#tblOne > tbody  > tr').each(function() {...code...});
1
Kevin Simple 14 juil. 2015 à 03:04