javascript - Looping through table rows and accessing data via class name using jquery - Stack Overflow

admin管理员组

文章数量:1415145

I have the following table format. the rows are generated using two for loops:

<table id="tableMain">
    <tr id = "uniqueID1" class = "firstClass">
        <td><input type='radio' name='radio1' value='0' class='myradio'>"</td>
        <td><input type='radio' name='radio1' value='1' class='myradio'>"</td>
    </tr>

    <tr id = "uniqueID2" class = "secondClass">
        <td><input type='radio' name='radio2' value='2' class='myradio1'>"</td>
        <td><input type='radio' name='radio2' value='3' class='myradio1'>"</td>
        <td><input type='radio' name='radio2' value='4' class='myradio1'>"</td>
    </tr>

    <tr id = "uniqueID3" class = "thirdClass">
        <td><input type='radio' name='radio3' value='5' class='myradio2'>"</td>
        <td><input type='radio' name='radio3' value='6' class='myradio2'>"</td>
        <td><input type='radio' name='radio3' value='7' class='myradio2'>"</td>
        <td><input type='radio' name='radio3' value='8' class='myradio2'>"</td>
    </tr>
</table>

Basically, the tr ID is unique for each row through out the whole table but the class name are different each time the loop goes out of the inner loop.. so it creates a kind of group within the table but still unique rowsIDs.

My question is how do I access the selected values at each row according to the class name and get the value at each.

Here is what I have tried:

$('#button').click(function(){
var rows=[];
$('#myForm tr').each(function(){
    var id=$(this).data('id');
    if( rows.indexOf(id) ==-1){ /* push to array if it doesn't exist */
        rows.push( id);
    }
});
var totalUnique= rows.length;
alert("Total Number of Comparison = " + totalUnique);
});

Is there a way to fetch each 'class' result into an array, do something with the result and then do the same for the rest..? i.e enter table body n look for first class, loop through and get the selected values on each row and then do same for rest?

I have the following table format. the rows are generated using two for loops:

<table id="tableMain">
    <tr id = "uniqueID1" class = "firstClass">
        <td><input type='radio' name='radio1' value='0' class='myradio'>"</td>
        <td><input type='radio' name='radio1' value='1' class='myradio'>"</td>
    </tr>

    <tr id = "uniqueID2" class = "secondClass">
        <td><input type='radio' name='radio2' value='2' class='myradio1'>"</td>
        <td><input type='radio' name='radio2' value='3' class='myradio1'>"</td>
        <td><input type='radio' name='radio2' value='4' class='myradio1'>"</td>
    </tr>

    <tr id = "uniqueID3" class = "thirdClass">
        <td><input type='radio' name='radio3' value='5' class='myradio2'>"</td>
        <td><input type='radio' name='radio3' value='6' class='myradio2'>"</td>
        <td><input type='radio' name='radio3' value='7' class='myradio2'>"</td>
        <td><input type='radio' name='radio3' value='8' class='myradio2'>"</td>
    </tr>
</table>

Basically, the tr ID is unique for each row through out the whole table but the class name are different each time the loop goes out of the inner loop.. so it creates a kind of group within the table but still unique rowsIDs.

My question is how do I access the selected values at each row according to the class name and get the value at each.

Here is what I have tried:

$('#button').click(function(){
var rows=[];
$('#myForm tr').each(function(){
    var id=$(this).data('id');
    if( rows.indexOf(id) ==-1){ /* push to array if it doesn't exist */
        rows.push( id);
    }
});
var totalUnique= rows.length;
alert("Total Number of Comparison = " + totalUnique);
});

Is there a way to fetch each 'class' result into an array, do something with the result and then do the same for the rest..? i.e enter table body n look for first class, loop through and get the selected values on each row and then do same for rest?

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 12, 2013 at 10:10 JotaBe 39.1k88 gold badges102102 silver badges119119 bronze badges asked Dec 12, 2013 at 0:09 user3045800user3045800 4333 silver badges1010 bronze badges 6

• 1 are you trying to get the data for one row or all rows? – solidau Commented Dec 12, 2013 at 0:12
• 1 the selected value at the row or all possible values? – solidau Commented Dec 12, 2013 at 0:14
• I am trying to get the data from all the rows but fetched class by class i.e. one class may have 2 td and others may have more. so I would like to group them in my result – user3045800 Commented Dec 12, 2013 at 0:16
• Have you tried anything? – TheCarver Commented Dec 12, 2013 at 0:21
• You do not show that "the tr ID is unique through out the whole table" and you undo my edits to make it correct. Your code will not wok unless you actually have unique id's. – solidau Commented Dec 12, 2013 at 0:55

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 2

For your seconde question , here is a code to get values of each tr row :

DEMO HERE

function rowsValues(){
 $("#tableMain tr").each(function(index,value){
    var rowValues=new Array(); 
    $(this).find('input:radio:checked').each(function(){
    rowValues.push(parseInt($(this).val()));
   }) 
      alert("row"+index+" : "+rowValues);
     //do something with rowValues
 } 
)}

to get the sum , Try this DEMO

function SUM(){
    var sum=0;
    $("#tableMain").find('input:radio:checked').each(function(){sum+= parseInt($(this).val());});
    return sum;
}

$("#btn").click(function(){alert(SUM());});

PS: Close your <td></td> correctly

While creating your table, if you store the classes in an array will greatly simplify this

/* stored while creating table*/
var rowClasses=['class_1','class_2'....];

$.each(rowClasses , function(i, className){       
   var thisClassRadioArray=$('tr.'+className +':radio:checked').map(function(){
           return this.value
   }).get()
})

You could do something like this:

$("button").on("click", function ()
{
    var value = 0;

    $("#tableMain").find("tr").each(function () 
    {
        value += parseInt( $(this).find(".myradio:checked").val() );
    }); 

    alert( value );
});

See working jsFiddle demo

I had to alter your HTML, as it wasn't valid:

<table id="tableMain">
    <tr id="uniqueID1" class="firstClass">
        <td><input type='radio' name='radio1' value='0' class='myradio' />0</td>
        <td><input type='radio' name='radio1' value='1' class='myradio' />1</td>
    </tr>
    <tr id="uniqueID2" class="secondClass">
        <td><input type='radio' name='radio2' value='2' class='myradio' />2</td>
        <td><input type='radio' name='radio2' value='3' class='myradio' />3</td>
    </tr>
    <tr id="uniqueID3" class="thirdClass">
        <td><input type='radio' name='radio3' value='4' class='myradio' />4</td>
        <td><input type='radio' name='radio3' value='5' class='myradio' />5</td>
    </tr>
</table>

<button>Calculate</button>

I did it so you can access each of the classes independently from an object. the fiddle is here: http://jsfiddle/jyYPM/2/

$('#button').click(function(){
    var AllObjects = [];
    $('#tableMain tr').each(function(){
        var thisClassData = {};
        thisClassData.ClassName = $(this).attr('class');
        thisClassData.Values = [];
        $(this).find('input:checked').each(function() {
            thisClassData.Values.push($(this).attr('value'));
        });
        AllObjects.push(thisClassData)
    });
    alert(JSON.stringify(AllObjects));
});

First: your HTM is invalid. Don't use the same ID for different elements:

Id reference in w3schools On "Definition and usage": The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

This could make the jQuery scripts fail. Please, solve this problem first!!

Apart form this, charaf jra's answer is perfect.

本文标签： javascriptLooping through table rows and accessing data via class name using jqueryStack Overflow