1

少し奇妙な状況。すべてが1つのテーブルにまとめられているレガシーHTMLでgreasemonkeyスクリプトを書いています。クリックしたものと次の3-4-5-6行から、TD.class_nameを含む次の行までのすべてのTR要素を選択したい

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 
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 に答える
0

これを試してみてください...最後の行（一番上）をに含めたいかどうかわからなかったので、このペーストビンサイト.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 に答える