jQuery Girl
  1. jQuery Girl
  3. Détecter si le dernier chiffre est 1-4 ou 5-9, alors appelez la ligne `this` du tableau
Intereting Posts
création d’une balise à l’aide de jquery bootstrap-tagsinput sans appuyer sur la touche Entrée Ajouter une div contenant une canvas ne fonctionne pas Funky jQuery mouseleave comportement Comment la fonction click () de jQuery peut-elle être tellement plus rapide que addEventListener ()? Comment insérer une autre ligne de tableau entre deux lignes de tableau? forcer angular à ré-entrer le contrôleur dans l’historique en utilisant Safari sous Mac OS Pourquoi le plug-in TableSorter n’affiche-t-il pas les résultats en fonction de l’entrée? comment append une classe active dynamic sur la page sélectionnée Comment charger l’éditeur codemirror js dans une iframe? Trouver la valeur inférieure maximale de scrollTop sur un div? Puis-je obtenir un jQuery différé sur document.ready ()? Convertir un object jQuery et son contenu en chaîne? Comment trouver «l’emplacement visuel» de chaque cellule du tableau à l’aide de jQuery? Masquer les iframes dont le contenu est bloqué par proxy JQuery Datepicker trouve la prochaine date désactivée

Détecter si le dernier chiffre est 1-4 ou 5-9, alors appelez la ligne `this` du tableau

Tout d’abord voici ma structure de table 

 
  
 9569  2016-04-14 17:39:00  John Smith  ￥81.28  Shipping  Paid     
  
 
  
 9564  2016-04-14 17:24:10  Jane smith  ￥109.69  Shipping  Paid

Mon orderId incrémente d’un orderId à chaque commande ce que je veux réaliser est de cibler le nombre avec jquery pour ne détecter que le dernier nombre, puis de détecter if 0-4 else 5-9 numéros se trouvent dans la rangée en rouge ou en vert.

Je sais que je peux le convertir en un nombre javascript, mais je me demande si cela ne fait que compliquer les choses en le transformant en chiffre. 

 var number = parseInt($('.orderId').text(), 10); alert(number)

Le problème, c’est que chaque commande sera traitée lorsque j’en ai besoin un par un par rangée.

Quelle serait la meilleure façon de résoudre ce problème et comment différencier chaque ligne indépendamment pour styler par chiffre final?

Il suffit de partitionner la liste des éléments, par exemple: 

 var // all candidates $all = $('.orderId'), // first set $_04 = $all.filter(function (i, el) { // check criteria return -1 < ['0', '1', '2', '3', '4'].indexOf(el.innerText.substr(-1)) }), // all except first set $_59 = $all.not($_04) ; // do stuff with both sets $_04.closest('tr').css('background', 'red'); $_59.closest('tr').css('background', 'green'); 
   
  
 9569  2016-04-14 17:39:00  John Smith  ￥81.28  Shipping  Paid     
  
 
  
 9564  2016-04-14 17:24:10  Jane smith  ￥109.69  Shipping  Paid

Vous pouvez utiliser regex /[\d]{1}$/ pour récupérer le dernier chiffre de orderid, 

 var elements = document.getElementsByClassName("orderId"); var regex = new RegExp(/[\d]{1}$/); for(var i=0; i

Vous devez définir différentes classes CSS pour chaque numéro et nom en conséquence, j'ai utilisé class1 etc.

Si vous modifiez un peu la structure HTML, vous pouvez également obtenir le résultat avec du CSS pur, à l’aide du sélecteur d’atsortingbut, plus précisément [atsortingbute$="value"] , qui sélectionne les éléments se terminant par la valeur. Vous auriez besoin d’append un atsortingbut décrivant l’ order-id aux éléments

, car vous ne pouvez pas atsortingbuer un style à l’ensemble

en sélectionnant l’élément enfant –

. Vous pouvez également append un atsortingbut order-id in class, mais cela pourrait casser des choses si ces

ont plusieurs classes.

Pour ce html: 

 
  
 9569  2016-04-14 17:39:00  John Smith  ￥81.28  Shipping  Paid     
 
 9564  2016-04-14 17:24:10  Jane smith  ￥109.69  Shipping  Paid

Et ces règles css 

 tr[data-order-id$="0"],tr[data-order-id$="1"],tr[data-order-id$="2"],tr[data-order-id$="3"],tr[data-order-id$="4"] { background-color: red; } tr[data-order-id$="5"],tr[data-order-id$="6"],tr[data-order-id$="7"],tr[data-order-id$="8"],tr[data-order-id$="9"] { background-color: green; }

https://jsfiddle.net/j8ngo7kh/