对于HTML Table列中的每个单元格做X?

时间:2012-06-12 10:47:10

标签: javascript jquery css html-table

只是想看看是否有更好的方法。

假设我有标准的HTML表格,其中包含几行和一列数据。我想要做的是将函数应用于属于该列的每一行或单元格。我现在正在尝试的是一个3深度循环,实际上并不是最好的。

<table id="myTable"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@example.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.example.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@example.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.example.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@example.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.example.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@example.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.example.com</td> 
</tr> 
</tbody> 
</table> 

让我们说我想利用网站列字符串或做一些整洁的事情。 我可能会:

*select the tbody using dom selector or jquery.
*for loop with each column
   *check if the data is what I want
*for loop for each row
   *do my function to each cell

这可能有点慢,我总是尽量避免嵌套循环。 无论如何可能使用Dom将列视为容器?

IE  for (cell x in Column y)
{ doMyfunction(); }

3 个答案:

答案 0 :(得分:2)

如果您使用的是jQuery,可以使用.each()函数:

$('#myTable td').each(function () {
    // action to perform.  Use $(this) for changing each cell
});

如果你知道你想要只改变一行中的一个特定单元格,那么一旦你知道它是哪个单元格,使用:eq()或:nth-​​child()选择器将允许特定单元格被操作而不需要排在行中的其他人。

下面的代码将操作行中的第一个单元格,因为eq()的索引从0开始。

$('#myTable tr td:eq(0)').each(function () {
    // action to perform.  Use $(this) for changing each cell
});

下面的代码仍会操纵第一个子节点,但nth-child()的索引从1开始

$('#myTable tr td:nth-child(1)').each(function () {
    // action to perform.  Use $(this) for changing each cell
});

答案 1 :(得分:1)

如果您只想使用css

来设置它的速度要快得多
tbody tr td:nth-child(4){font-weight:bold;}

据我所知你也可以在JQuery中使用那个css选择器

答案 2 :(得分:0)

使用jQuery

$("td", "#myTable tbody").each(function(index, elem){
// do my stuff here
});