1

我有两个从 PHP 中的数组生成的表。然后我想依次显示每个表格的每一行。但是每个表应该是独立的。我过去通过为每个表指定一个 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>
4

3 回答 3

2

看到这个小提琴：

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++;
}


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

于 2013-09-12T15:12:37.287 回答
1

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

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

于 2013-09-12T14:44:49.760 回答
1

我想我明白了：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，它只会继续计数！

于 2013-09-12T16:16:06.393 回答