Question

我在PHP中使用Array生成了两个表。然后我想依次显示每个表的每一行。但每张桌子应该是独立的。我过去通过为每个表指定一个ID来管理它，然后为每个表复制javascript，但是必须有一个更有效的方法来执行此操作，这允许一个未定义的数字表。我不能轻易添加唯一ID，因为数据来自单个数组，并且元素的数量在前面是未知的。

我有以下Javascript，但是它从两个表中挑选所有，并循环遍历它们（一次一个表），而不是每个表独立。

我试过了：

var $rows = $(this).child.('.tabResult tbody tr')

但那是错的。有人可以指出我正确的方向。

<html>
<head>
    <script language="JavaScript" src="../Generic/JAVASCRIPT/jquery.js" type="text/javascript"></script>
    <style>
        table{ border: 3px solid #000000; display:inline-block}
        th{ border-width: 2px; border-color: #000000; border-style: solid; background-color: #CFCFCF; color: #000000; }
        td{ border-width: 2px; border-color: #000000; border-style: solid; }
        td.lastRow{ background:red; }
        tr.lastRow { border-bottom:10px solid #000000; }
    </style>
    <script>

var m = 0;
function showRows()
{
    var $rows = $('.tabResult tbody tr'); //Get ALL Rows

    $rows.css('display','none'); //Hide ALL Rows

    $rows.eq(m).css('display','table-row'); //Show Row

    if (m == $rows.length-1){m = 0;}else{m++;}; //Increment to Next Row
}

function hideShow(time)
{   
    timer = setInterval('showRows()',time); 
};

$(document).ready(function()
{
    hideShow(3000);
}
)           

    </script>
</head>
<body>
    <table class="tabResult"> 
        <thead>  
            <tr> <th>Table1</th> </tr> 
        </thead> 
        <tbody>  
            <tr> <td>11001</td> </tr>  
            <tr> <td>11002</td> </tr>  
            <tr> <td>11003</td> </tr>  
        </tbody>
    </table>

    <table class="tabResult"> 
        <thead>  
            <tr> <th>Table2</th> </tr> 
        </thead> 
        <tbody>  
            <tr> <td>11001</td> </tr>  
            <tr> <td>11002</td> </tr>  
            <tr> <td>11003</td> </tr>
            <tr> <td>11004</td> </tr>  
        </tbody>
    </table>
</body>
</html>

Answer 1

请参阅此Fiddle：

function showRows() {
    var $tables = $('table.tabResult');    
    $.each($tables, function (index, table) {
        var $rows = $('tbody tr', $(table)); //Get ALL Rows
        $rows.hide(); //Hide ALL Rows
        $rows.eq(m % $rows.length).show(); //Show Row
    });
    m++;
}

该代码适用于任意数量的表和每个表的不同行数。

Answer 2

您需要完成两个步骤：
- 定义表的数量： var $ tables = $("body").children("table.tabResult");
- 变量$ tables是类似表的数组。因此，您可以遍历每个表并使用“for”语句获取所有行。

这种方法适用于每个表中不同数量的单元格

Answer 3

我想我明白了：http://jsfiddle.net/yub4c/5/

var rows = new Array();
$('table').each(function (i) {
    rows[i] = $(this).find('tr:not(.hdr)'); //Get ALL Rows
    rows[i].hide(); //Hide ALL Rows
    //x = $(this).find('tr:not(.hdr)').length;
    //alert(x);
    rows[i].eq(0).show(); //Show Row
    window.setInterval(function() {
        //alert($rows.filter(':visible').index());
        if (rows[i].filter(':visible').index() >= rows[i].length-1) {
            rows[i].hide();
            rows[i].eq(0).show(); //Show Row
        } else {
            rows[i].filter(':visible').hide().next('tr').show();
        }
    }, 500);
});

编辑：

如果你在其中一个表中添加一个额外的td，它就会继续计数！

jQuery - 如何遍历两个相似表上的行

3 个答案: