1
votes

JS boucle dans le tableau et imprime le texte dans la colonne en fonction de la condition

J'ai un tableau simple et j'ai besoin d'imprimer un texte dans une certaine colonne en fonction de la condition sur les colonnes masquées. Il y a plusieurs lignes comme enregistrement qui ont le même ID TD. Ce que je dois faire est de parcourir chaque ligne du tableau et de vérifier status1 ( gv-field-15-139 ), status2 ( gv-field-15-140 ) et status3 ( gv-field-15-141 ). Si l'un de ces statuts ( gv-field-15-150 ) est "Terminé", je veux imprimer Terminé dans la colonne Statut. est-ce possible?

    <table>
      <tr>
       <th>Student Name</th>
       <th>Nationality</th>
       <th>Status</th>
       <th>Status1</th>
       <th>Status2</th>
       <th>Status3</th>
      </tr>
      <tr>
       <td id="gv-field-15-1">Student A</td>
       <td id="gv-field-15-90">India</td>
       <td id="gv-field-15-150">&nbsp;</td>
       <td id="gv-field-15-139">Completed</td>
       <td id="gv-field-15-140">Pending</td>
       <td id="gv-field-15-141">Pending</td>
      </tr>
      <tr>
       <td id="gv-field-15-1">Student B</td>
       <td id="gv-field-15-90">China</td>
       <td id="gv-field-15-150">&nbsp;</td>
       <td id="gv-field-15-139">Completed</td>
       <td id="gv-field-15-140">Pending</td>
       <td id="gv-field-15-141">Pending</td>
      </tr>
    </table>

 $(document).ready(function(){
     if(($('td#gv-field-15-139').text() == 'Completed') || ($('td#gv-field-15-
     140').text() == 'Completed') || ($('td#gv-field-15-141').text() == 'Completed') ) {
    $("td#gv-field-15-150").text('Completed');
    }

Cela ne fonctionne que pour 1 ligne et quand il devient 2 lignes ou plus cela ne fonctionne pas. Pourriez-vous s'il vous plaît me montrer un moyen d'y parvenir.

javascript html-table

1 commentaires

Ne dupliquez pas les identifiants, c'est pourquoi vous ne pouvez pas accéder au-delà du premier. Lorsque JS trouve un identifiant, il suppose naturellement que c'est la seule balise avec cet identifiant. Changez vos identifiants en classes.

6 Réponses :

3
votes

Bouclez votre tr sauf le premier tr qui a th et vérifiez td . Bien que vous puissiez résoudre votre problème avec les identifiants, il est recommandé d'utiliser la classe au lieu des identifiants.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
   <th>Student Name</th>
   <th>Nationality</th>
   <th>Status</th>
   <th>Status1</th>
   <th>Status2</th>
   <th>Status3</th>
  </tr>
  <tr>
   <td id="gv-field-15-1">Student A</td>
   <td id="gv-field-15-90">India</td>
   <td id="gv-field-15-150">&nbsp;</td>
   <td id="gv-field-15-139">Completed</td>
   <td id="gv-field-15-140">Pending</td>
   <td id="gv-field-15-141">Pending</td>
  </tr>
  <tr>
   <td id="gv-field-15-1">Student B</td>
   <td id="gv-field-15-90">China</td>
   <td id="gv-field-15-150">&nbsp;</td>
   <td id="gv-field-15-139">Completed</td>
   <td id="gv-field-15-140">Pending</td>
   <td id="gv-field-15-141">Pending</td>
  </tr>
  <tr>
   <td id="gv-field-15-1">Student B</td>
   <td id="gv-field-15-90">China</td>
   <td id="gv-field-15-150">&nbsp;</td>
   <td id="gv-field-15-139">Pending</td>
   <td id="gv-field-15-140">Pending</td>
   <td id="gv-field-15-141">Pending</td>
  </tr>
</table>

$(document).ready(function() {
    var trs = $('tr').not(':eq(0)');
    $.each(trs, function() {
        var $this = $(this);
        if (($this.find('>td#gv-field-15-139').text() == 'Completed') || ($this.find('>td#gv-field-15-140').text() == 'Completed') || ($this.find('>td#gv-field-15-141').text() == 'Completed')) {
            $this.find(">td#gv-field-15-150").text('Completed');
        }
    });
});

0 commentaires

2
votes

Cette solution est tellement simpliste qu'elle n'a même pas besoin de jQuery, j'ai également pensé qu'il serait peut-être plus agréable de lire si vous rompiez un peu la logique, c'est-à-dire plutôt que d'avoir une déclaration if laide et longue, J'ai implémenté la fonction isComplete .

Pour info. Les identifiants sont censés être uniques sur toute la page, il peut être préférable de les changer en classes si vous le pouvez.

Edit

Après avoir regardé la belle solution produite par @HMR, j'ai pensé inclure une partie du code élégant qui a été implémenté dans cette solution , Je ne peux pas m'en attribuer tout le mérite!

<table>
  <tr>
    <th>Student Name</th>
    <th>Nationality</th>
    <th>Status</th>
    <th>Status1</th>
    <th>Status2</th>
    <th>Status3</th>
  </tr>
  <tr>
    <td id="gv-field-15-1">Student A</td>
    <td id="gv-field-15-90">India</td>
    <td id="gv-field-15-150">&nbsp;</td>
    <td id="gv-field-15-139">Completed</td>
    <td id="gv-field-15-140">Pending</td>
    <td id="gv-field-15-141">Pending</td>
  </tr>
  <tr>
    <td id="gv-field-15-1">Student B</td>
    <td id="gv-field-15-90">China</td>
    <td id="gv-field-15-150">&nbsp;</td>
    <td id="gv-field-15-139">Completed</td>
    <td id="gv-field-15-140">Pending</td>
    <td id="gv-field-15-141">Pending</td>
  </tr>
  <tr>
    <td id="gv-field-15-1">Student C</td>
    <td id="gv-field-15-90">China</td>
    <td id="gv-field-15-150">&nbsp;</td>
    <td id="gv-field-15-139">Pending</td>
    <td id="gv-field-15-140">Pending</td>
    <td id="gv-field-15-141">Pending</td>
  </tr>
</table>

// Just short hand.
const $e = queryString => document.querySelectorAll(queryString);
const term = 'Completed';

// Returns a boolean.
const isComplete = td => td.textContent.replace(/\ /, '') === term;

// Some fallback function.
const fallback = () => console.log('Next...');

// Render the update(s).
const render = (v, t) => v.includes(true) ? t.textContent = term : fallback();

// Updates the relevant td tags.
const update = tr => {
  const tds = Array.from(tr.querySelectorAll('td'));
  const [, , , ...values] = tds.map(td => isComplete(td));
  const [, , td] = tds;
  render(values, td);
};

// Iterate over the relevant tr tags.
const loop = () => Array.from($e("table tr")).splice(1, ).forEach(tr => update(tr));

// Start the process.
loop();

0 commentaires

0
votes

Il y a quelques problèmes:

Vous avez des ID en double. L'ID doit être unique. Dans votre code actuel, vous obtiendrez toujours le premier élément avec l'ID nécessaire. Vous devriez donc utiliser des classes à la place
Vous ne faites pas de boucle. Comme il s'agit d'une table et que vous devez gérer chaque ligne, vous devez effectuer une boucle sur toutes les lignes et en fonction de la ligne actuelle, vous devez vérifier / mettre à jour la valeur de la colonne nécessaire.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Student Name</th>
    <th>Nationality</th>
    <th>Status</th>
    <th>Status1</th>
    <th>Status2</th>
    <th>Status3</th>
  </tr>
  <tr>
    <td class="gv-field-15-1">Student A</td>
    <td class="gv-field-15-90">India</td>
    <td class="gv-field-15-150">&nbsp;</td>
    <td class="gv-field-15-139">Completed</td>
    <td class="gv-field-15-140">Pending</td>
    <td class="gv-field-15-141">Pending</td>
  </tr>
  <tr>
    <td class="gv-field-15-1">Student B</td>
    <td class="gv-field-15-90">China</td>
    <td class="gv-field-15-150">&nbsp;</td>
    <td class="gv-field-15-139">Pending</td>
    <td class="gv-field-15-140">Pending</td>
    <td class="gv-field-15-141">Pending</td>
  </tr>
</table>

$(document).ready(function() {

  var $tr = $('table tr');
  $.each($tr, function(index, tr) {
    if (
      ($('.gv-field-15-139', tr).text() == 'Completed') ||
      ($('.gv-field-15- 140', tr).text() == 'Completed') ||
      ($('.gv-field-15-141', tr).text() == 'Completed')
    ) {
      $(".gv-field-15-150", tr).text('Completed');
    }
  })
});

0 commentaires

2
votes

N'utilisez pas d'identifiants en double, vous pouvez utiliser l'index des cellules en tête:

<table>
  <tr>
   <th>Student Name</th>
   <th>Nationality</th>
   <th>Status</th>
   <th>Status1</th>
   <th>Status2</th>
   <th>Status3</th>
  </tr>
  <tr>
   <td>Student A</td>
   <td>India</td>
   <td>xxx</td>
   <td>Completed</td>
   <td>Pending</td>
   <td>Pending</td>
  </tr>
  <tr>
   <td>Student B</td>
   <td>China</td>
   <td>xxx</td>
   <td>Completed</td>
   <td>Pending</td>
   <td>Pending</td>
  </tr>
  <tr>
   <td>Student C</td>
   <td>Not Completed</td>
   <td>xxx</td>
   <td>Pending</td>
   <td>Pending</td>
   <td>Pending</td>
  </tr>
</table>

const table = document.querySelector('table');
//take all rows except the header
const rows = Array.from(table.querySelectorAll('tr')).slice(
  1,
);
rows.forEach((row) => {
  const cells = Array.from(
    row.querySelectorAll('td')
  );
  //get the 3rd cell
  const [, , toSet] = cells;
  //all values after 3rd cell
  const [, , ,...values] = cells.map(
    (cell) => cell.innerText.trim()//map to the innerText of the cell
  );
  if(values.includes('Completed')){
    toSet.innerHTML = 'Completed'
  }
});

1 commentaires

Probablement la meilleure réponse à ce jour, très belle solution!

0
votes

Parcourez toutes les lignes du tableau sauf la première ligne (et donc => $('tr').length-1).

.eq () est utilisée pour accéder à chaque élément / texte par index.

    $(document).ready(function () {
       for(i=0;i<$('tr').length-1;i++){
           if( ($('td#gv-field-15-139').eq(i).text() == 'Completed') || ($('td#gv-field-15-140').eq(i).text() == 'Completed') || ($('td#gv - field - 15 - 141').eq(i).text() == 'Completed') ) {
            $("td#gv-field-15-150").eq(i).text('Completed');
           }
       }
    });

0 commentaires

0
votes

Les

`#ID` doivent toujours être uniques

Le fait d'avoir des #ids dupliqués rend le HTML invalide, plus important encore, il paralyse JS / jQ car on s'attend à ce que Les #ids sont uniques, donc une fois trouvés, aucun effort n'est fait pour continuer pour la deuxième occurrence d'un #id .

Changements

Tous les #ids ont été remplacés par .classes
Les 3 derniers de chaque ligne ont une classe partagée: .status

 Le 3ème   de chaque ligne a une nouvelle classe: .primary 
Référence
    .each ()   
    .prevAll ()  
Demo
  Trois lignes de code ... c'est tout ce dont vous avez besoin. 
 

<table>
  <tr>
    <th>Student Name</th>
    <th>Nationality</th>
    <th>Status</th>
    <th>Status1</th>
    <th>Status2</th>
    <th>Status3</th>
  </tr>
  <tr>
    <td class="gv-field-15-1">Student A</td>
    <td class="gv-field-15-90">India</td>
    <td class="gv-field-15-150 primary">&nbsp;</td>
    <td class="gv-field-15-139 status">Completed</td>
    <td class="gv-field-15-140 status">Pending</td>
    <td class="gv-field-15-141 status">Pending</td>
  </tr>
  <tr>
    <td class="gv-field-15-1">Student B</td>
    <td class="gv-field-15-90">China</td>
    <td class="gv-field-15-150 primary">&nbsp;</td>
    <td class="gv-field-15-139 status">Completed</td>
    <td class="gv-field-15-140 status">Pending</td>
    <td class="gv-field-15-141 status">Pending</td>
  </tr>
  <tr>
    <td class="gv-field-15-1">Student C</td>
    <td class="gv-field-15-90">USA</td>
    <td class="gv-field-15-150 primary">&nbsp;</td>
    <td class="gv-field-15-139 status">ERROR</td>
    <td class="gv-field-15-140 status">Pending</td>
    <td class="gv-field-15-141 status">Pending</td>
  </tr>
  <tr>
    <td class="gv-field-15-1">Student D</td>
    <td class="gv-field-15-90">France</td>
    <td class="gv-field-15-150 primary">&nbsp;</td>
    <td class="gv-field-15-139 status">Pending</td>
    <td class="gv-field-15-140 status">Pending</td>
    <td class="gv-field-15-141 status">Completed</td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$('.status').each(function() {
  if ($(this).text() === 'Completed') {
    $(this).prevAll('.primary').text('Completed');
  }
});

0 commentaires

JS boucle dans le tableau et imprime le texte dans la colonne en fonction de la condition

Edit

#ID doivent toujours être uniques

Changements

Référence

Demo

`#ID` doivent toujours être uniques