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

Looping through table rows and accessing data via class name using jquery

本文关键字：访问 数据 jquery 循环 使用      更新时间：2023-09-26

我有以下表格格式。使用两个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对于整个表中的每一行都是唯一的，但每次循环离开内部循环时，类名都不同。。因此它在表中创建了一种组，但仍然是唯一的rowsID。

我的问题是如何根据类名访问每一行的选定值，并获取每一行中的值。

以下是我尝试过的：

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

有没有一种方法可以将每个"类"结果提取到数组中，对结果执行某些操作，然后对其余结果执行相同操作。。？即输入表体n查找第一个类，循环并获取每行的选定值，然后对其余部分执行相同操作？

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

演示在这里

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

要得到总数，请尝试这个演示

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>

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

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

您可以这样做：

$("button").on("click", function ()
{
    var value = 0;
    $("#tableMain").find("tr").each(function () 
    {
        value += parseInt( $(this).find(".myradio:checked").val() );
    }); 
    alert( value );
});

查看工作jsFiddle演示

我不得不修改你的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>

我这样做是为了让您可以独立于对象访问每个类。小提琴在这里：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));
});

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

w3schools中的Id参考关于"定义和用法"：id属性为HTML元素指定一个唯一的id（该值在HTML文档中必须是唯一的）。

这可能会导致jQuery脚本失败。请先解决这个问题！！

除此之外，查拉夫·吉拉的回答是完美的。

相关文章：