1

有点奇怪的情况。我正在一些遗留 HTML 上编写一个greasemonkey 脚本，其中所有内容都放在一个表中。我想从我单击的那个和接下来的 3-4-5-6 行中选择所有 TR 元素，直到包含 TD.class_name 的下一行

table
  ...
  tr -> td.class_name
  tr
  tr
  tr
  tr -> td.class_name
  ...
/table

因此，在上面的示例中，我想选择第 2、3、4 行（并隐藏它们，这是微不足道的部分）。挑战在于我不知道有多少行，而且这张表可能很长。

我怎么能在 jQuery 中以一种优雅的方式做到这一点？

4

3 回答 3

1

我希望你理解这个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
$(function(){

    var fnc = function(){
        $(this).nextAll().each(function() {
            if (($(this)[0]) && ($(this)[0].tagName.toLowerCase()=="tr")) {

                var td_lst = $(this).find('td[class="stop"]');
                if ($(td_lst).length!=0)
                    return false;

                $(this).css("background-color","#00FF66");

            } else {
                return false;
            }
    });
  }

  $('table tr[class="xevent"]').bind("click",   fnc);

}); 
</script>
<style>
    .stop{
        background-color:#009999;
    }
</style>
</head>
<body>
<table border="1">
    <tr class="xevent"><td>text a</td><td class="stop">text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr class="xevent"><td>text a</td><td class="stop">text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr class="xevent"><td>text a</td><td class="stop">text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr class="xevent"><td>text a</td><td class="stop">text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
    <tr><td>text a</td><td>text b</td><td>text c</td></tr>
</table>
</body>
</html>
于 2009-09-25T19:14:07.840 回答
0

试试这个...我不确定你是否想在 中包含最后一行（最高的） ，所以我在这个 pastebin 网站.class_name上做了一个脚本演示，并突出显示了它找到的行。当您希望它实际删除行时，您可以删除注释标记。

这是基本代码：

$(document).ready(function(){
 $('.class_name').click(function(){
  var row = $(this)[0].rowIndex - 1;
  $(this).addClass('removeme');
  for (j=0;j<row+1;j++){
   var el = $('table tr:eq('+(row-j)+')'); 
   if (el.hasClass('class_name')) {
    // el.addClass('removeme'); // Remove comment marks if you want this row included
    break;
   }
  el.addClass('removeme');
  }
 // $('.removeme').remove();  // Remove comment marks when you want to remove the rows
 });
});

如果您确实想在课程中包含最后（最高）行.class_name，那么只需取消注释el.addClass('removeme');之前的break

于 2009-09-27T10:30:11.250 回答
0 
var in_selection = false;
$('table#id tr').each(function () {
    if ($('td.class_name', this)) {
        if (in_selection) return false;
        in_selection = true;
    }
    if (in_selection) {
        $(this).addClass('selected');
    }
    return true;
});
not tested
于 2009-09-25T18:28:16.607 回答