gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 07:16:06 24 4
gpt4 key购买 nike

我有两个从 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>

最佳答案

查看此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++;
}


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

关于jQuery - 如何循环遍历两个相似表上的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18766987/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com