Question

我有以下表格格式。使用两个for循环生成行：

<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>

基本上，tr ID对于整个表中的每一行都是唯一的，但每次循环离开内循环时类名都不同。所以它在表中创建了一种组但仍然是唯一的rowsIDs 。

我的问题是如何根据班级名称访问每行的选定值，并获取每个值。

以下是我的尝试：

$('#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);
});

有没有办法将每个'class'结果提取到一个数组中，对结果做一些事情，然后对其余部分做同样的事情......？即输入表体n寻找第一类，循环并获取每行的选定值，然后做同样的休息？

Answer 1

对于你的seconde问题，这里有一个代码来获取每个tr行的值：

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
 } 
)}

获得总和，试试这个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：正确关闭<td></td>

Answer 2

创建表时，如果将类存储在数组中将大大简化此

/* 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()
})

Answer 3

你可以这样做：

$("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

我必须更改您的HTML，因为它无效：

<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>

Answer 4

我这样做了，因此您可以独立于对象访问每个类。小提琴在这里：http://jsfiddle.net/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));
});

Answer 5

首先：您的HTM无效。不要对不同的元素使用相同的ID：

Id reference in w3schools 关于“定义和用法”：id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的。）

这可能会使jQuery脚本失败。请先解决这个问题!!

除此之外，charaf jra的答案是完美的。

循环遍历表行并使用jquery通过类名访问数据

5 个答案: