1
votes

Je n'arrive pas à récupérer le contenu de ma table jquery

tout le monde

J'essaie désespérément de trouver comment récupérer dans un tableau les lignes uniquement celles dont la valeur d'entrée est remplie.Je veux pouvoir récupérer la première colonne (le texte) et la deuxième colonne (valeurs des entrées) Ceci est mon code html. Merci d'avance.

var Qte = $('#TableSelect tr:not(:first-child) td input').filter(function(){

      return $(this).val();

        })  ;

        console.log(Qte);

C'est mon code dans jquery.

<table id="TableSelect">
<tbody>
<tr>
<th>name</th>
<th>price</th>
<th>qte</th>
</tr>
<tr>
    <td class="tdQuantite"> Dell Latitude 7390</td>
    <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="" class="stock"> </td>
    <td class="tdQuantite">61</td>
</tr>

<tr>
    <td class="tdQuantite"> Dell Latitude 7490</td>
    <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="" class="stock"> </td>
    <td class="tdQuantite">61</td>
</tr>

<tr>
    <td class="tdQuantite"> Dell Latitude 5590</td>
    <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="" class="stock"> </td>
    <td class="tdQuantite">61</td>
</tr>
<tbody>
</table>


0 commentaires

4 Réponses :


0
votes

Vous devez sélectionner les valeurs souhaitées en plus de filtrer les lignes:

var Qte = []

$('#TableSelect tr').each(function(){
      if($('td input', this).val()){
          Qte.push([$('td:first-child', this).text(), $('input', this).val()]
      }
})
console.log(Qte);

Cela pousse un tableau [texte de la première colonne, valeur d'entrée] dans Qte chaque fois que la valeur d'entrée est rempli.


0 commentaires

0
votes

Vous devez ajouter les paramètres index et élément à la fonction de filtrage. Ensuite, à partir du paramètre d'élément, vous pouvez accéder aux valeurs des cellules. Quelque chose du genre devrait vous aider:

//outside the function
var values = [];

//from inside the function
var textAndValueArray = [cell1, cell2];

values.push(textAndValueArray);
return;

Vous devriez maintenant obtenir les valeurs que vous recherchez, en supposant que votre sélecteur jQuery renvoie les éléments appropriés.

Vous pouvez pousser ces valeurs dans un tableau si c'est ainsi que vous souhaitez les stocker. Ce qui peut être fait comme ceci:

var Qte = $('#TableSelect tr:not(:first-child)')
         .filter(function(i, element){

            var cell1 = element.childNodes[0].value;
            var cell2 = element.childNodes[1].value;

            return $(this).val();
          });

Vous avez maintenant un tableau de tableaux contenant votre texte et votre valeur. Cela vous donne maintenant un moyen facile de boucler sur ces valeurs et vous savez que chaque index de tableau contient un texte et un tableau de valeurs.


3 commentaires

ceci est le même que élément dans .filter


L'élément est l'élément . Il n'a pas de nœud enfant.


Les nœuds enfants sont , ils n'ont pas .value . L'entrée est l'enfant du deuxième nœud enfant.



0
votes

Vous devriez filtrer le , pas . Ensuite, vous pouvez utiliser .map () pour obtenir le contenu des colonnes que vous voulez à partir de ces lignes.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TableSelect">
  <tbody>
    <tr>
      <th>name</th>
      <th>price</th>
      <th>qte</th>
    </tr>
    <tr>
      <td class="tdQuantite"> Dell Latitude 7390</td>
      <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="10" class="stock"> </td>
      <td class="tdQuantite">61</td>
    </tr>

    <tr>
      <td class="tdQuantite"> Dell Latitude 7490</td>
      <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="" class="stock"> </td>
      <td class="tdQuantite">61</td>
    </tr>

    <tr>
      <td class="tdQuantite"> Dell Latitude 5590</td>
      <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="15" class="stock"> </td>
      <td class="tdQuantite">61</td>
    </tr>
    <tbody>
</table>
var qDE =
  $("#TableSelect tr:not(:first-child)").filter(function() {
    return $(this).find("input").val();
  }).map(function() {
    return {
      item: $(this).find(".tdQuantite").first().text(),
      quantity: $(this).find("input").val()
    };
  }).get();
console.log(qDE);


3 commentaires

Ce $ (this) .find (". TdQuantite"). Text () trouvera 2 balises .


Mais .text () ne renvoie que le texte du premier.


Votre extrait de code renvoie: item: "Dell Latitude 739061" vice "Dell Latitude 7390" Il tire les deux, selon la documentation de .text () Obtenez le contenu textuel combiné de chaque élément dans l'ensemble des éléments correspondants, y compris leurs descendants.



0
votes

Vous n'utilisez aucune condition dans votre fonction de filtrage. Vous devez indiquer si la valeur est vide ou non.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TableSelect">
  <tbody>
    <tr>
      <th>name</th>
      <th>price</th>
      <th>qte</th>
    </tr>
    <tr>
      <td class="tdQuantite"> Dell Latitude 7390</td>
      <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="57" class="stock"> </td>
      <td class="tdQuantite">61</td>
    </tr>

    <tr>
      <td class="tdQuantite"> Dell Latitude 7490</td>
      <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="" class="stock"> </td>
      <td class="tdQuantite">61</td>
    </tr>

    <tr>
      <td class="tdQuantite"> Dell Latitude 5590</td>
      <td><input type="text" size="5" data="qte" name="QUANTITE_300" value="459" class="stock"> </td>
      <td class="tdQuantite">61</td>
    </tr>
  </tbody>
</table>
var Qte = $('#TableSelect tr:not(:first-child) td input').filter(function() {
  return $(this).val() != '';
}).map(function() {
  let parent = jQuery(this).closest("tr");
  return {
    value: parent.find("input").val(),
    text: parent.find(".tdQuantite").text().trim()
  }
});

console.log(Qte);


2 commentaires

Ils utilisent des conditions. $ (ceci) .val (); Est une expression véridique et prend la valeur false si la valeur est vide.


Grâce à vous tous, j'ai pu débloquer mon programme