web-dev-qa-db-fra.com

Parcourez chaque colonne du tableau HTML et récupérez les données à l'aide de jQuery

j'essaie d'obtenir les données à l'intérieur du code HTML <tbody>. Fondamentalement, j'ai beaucoup de lignes comme celle-ci; enter image description here

                <tbody>
                    <tr>
                        <td>63</td>
                        <td>Computer</td>
                        <td>3434</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="mprDetailRemove"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>64</td>
                        <td>Stationary</td>
                        <td>111</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="Button1"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>64</td>
                        <td>Stationary</td>
                        <td>11</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="Button2"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                </tbody>

Maintenant, je suis en train de boucler et d'essayer d'obtenir le <td> valeurs comme celle-ci;

        var table = $("#mprDetailDataTable table tbody");

        table.find('tr').each(function (key, val) {
            $(this).find('td').each(function (key, val) {
                var productId = val[key].innerHTML; // this isn't working
                var product = ?
                var Quantity = ?
            });
        });

Mais, je ne peux pas obtenir les valeurs (texte html) de chaque ligne. Je veux affecter ces valeurs à des variables locales.
En outre, je ne veux pas obtenir le innerHTML d'un bouton (qui est dans chaque ligne))

jqueryhtmlloopsforeach
32
DotNet Dreamer

L'utilisation d'un .each() imbriqué signifie que votre boucle interne effectue un td à la fois, vous ne pouvez donc pas définir les paramètres productId et product et quantity. tout dans la boucle intérieure.

Utiliser également function(key, val), puis val[key].innerHTML N'est pas correct: la méthode .each() transmet l'index (un entier) et l'élément réel, vous utiliseriez donc function(i, element) puis element.innerHTML. Bien que jQuery définisse également this sur l'élément, vous pouvez simplement dire this.innerHTML.

Quoi qu'il en soit, voici un moyen de le faire fonctionner:

    table.find('tr').each(function (i, el) {
        var $tds = $(this).find('td'),
            productId = $tds.eq(0).text(),
            product = $tds.eq(1).text(),
            Quantity = $tds.eq(2).text();
        // do something with productId, product, Quantity
    });

Démo: http://jsfiddle.net/bqX7Q/

68
nnnnnn

essaye ça

    $("#mprDetailDataTable tr:gt(0)").each(function () {
        var this_row = $(this);
        var productId = $.trim(this_row.find('td:eq(0)').html());//td:eq(0) means first td of this row
        var product = $.trim(this_row.find('td:eq(1)').html())
        var Quantity = $.trim(this_row.find('td:eq(2)').html())
    });
8
sangram parmar

Mon premier post ...

J'ai essayé ceci: changez 'tr' pour 'td' et vous obtiendrez tous les HTMLRowElements dans un tableau, et l'utilisation de textContent changera d'objet en chaîne

var dataArray = [];
var data = table.find('td'); //Get All HTML td elements

// Save important data into new Array
for (var i = 0; i <= data.size() - 1; i = i + 4)
{
  dataArray.Push(data[i].textContent, data[i + 1].textContent, data[i + 2].textContent);
}
3
Jurgen

Lorsque vous créez votre table, mettez votre td avec class = "suma"

$(function(){   

   //funcion suma todo

   var sum = 0;
   $('.suma').each(function(x,y){
       sum += parseInt($(this).text());                                   
   })           
   $('#lblTotal').text(sum);   

   // funcion suma por check                                           

    $( "input:checkbox").change(function(){
    if($(this).is(':checked')){     
        $(this).parent().parent().find('td:last').addClass('suma2');
   }else{       
        $(this).parent().parent().find('td:last').removeClass('suma2');
   }    
   suma2Total();                                                           
   })                                                      

   function suma2Total(){
      var sum2 = 0;
      $('.suma2').each(function(x,y){
        sum2 += parseInt($(this).text());       
      })
      $('#lblTotal2').text(sum2);                                              
   }                                                                      
});

Ejemplo completo

1
Dave Rincon

Vous pouvez essayer avec textContent.

var productId = val[key].textContent;
0
Zero Fiber