当前位置: 代码迷 >> JavaScript >> 求jquery获取table中的所有tr解决方案
  详细解决方案

求jquery获取table中的所有tr解决方案

热度:390   发布时间:2012-04-07 17:31:52.0
求jquery获取table中的所有tr
本人刚学jquery,以前一直用mootools。现要对一个id为t1的table中的所有tr添加mouseenter和mouseout事件,我是这样弄的,但是有错误:
function HighLightTR(color,objId)
{

  var trBgcolor;

  var ArrTR = $(objId+" tr");


  ArrTR.each(function(index,element){

element.mouseout(function(){

element.css('background-color','red');
});
   
  element.mouseenter(function(){
  element.css('background-color','blue');
  });
  });

  return ArrTR;

}

------解决方案--------------------
你看过jQuery的API没,如果没先去看看吧,有很多例子的
http://download.csdn.net/detail/p2227/3936926

另外你只给出函数是不全面的,相关的HTML也要有

最后,jQuery中根据ID获取DOM是$("#id")
------解决方案--------------------
JScript code
    <!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>  
        <title></title>  
        <style type="text/css">  
            .odd{ background-color:Yellow; }  
            .even{ background-color:Gray; }  
            .tdGroup { background-color:Green; }  
            .mouseOver{ background-color:Red; }  
        </style>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  
        <script type="text/javascript">
            $(function () {
                $.fn.ChangeOddEvenTrColor("tbodyList", "odd", "even", true, "pointer", "mouseOver");
                $.fn.ChangeOddEvenTrColorWithGroup("tableList", "odd", "even", "tdGroup", false, true, "pointer", "mouseOver");
                $.fn.ChangeOddEvenTrColorWithGroup("tableList2", "odd", "even", "tdGroup", false, false, "pointer", "mouseOver");
            });
            //=====================================================================    
            //插件名称: ChangeOddEvenTrColor    
            //作    者: yenange
            //功能说明: 设置奇偶行换色  
            //输入参数: 表格(table或tbody)id, 奇行class, 偶行class, 是否从第一行开始  
            //调用示例: $(function(){ $.fn.ChangeOddEvenTrColor("table1", "odd", "even", true,"pointer","mouseOver"); });        
            //输出参数:  
            //创建日期: 2011-09-01  
            (function ($) {
                jQuery.fn.ChangeOddEvenTrColor = function (tabId, oddClass, evenClass, fromFirstTr, cursor, mouseOverClass) {
                    var $obj = fromFirstTr ? $("#" + tabId + " tr") : $("#" + tabId + " tr").not(":first");
                    $obj.filter(":odd").addClass(oddClass).css("cursor", cursor);
                    $obj.filter(":even").addClass(evenClass).css("cursor", cursor);
                    if (typeof (mouseOverClass) != "undefined") {
                        $($obj).each(function () {
                            $(this).mouseover(function () {
                                $(this).addClass(mouseOverClass);
                            }).mouseout(function () {
                                $(this).removeClass(mouseOverClass);
                            });
                        });
                    }
                }
            })(jQuery);
            //=====================================================================    
            //插件名称: ChangeOddEvenTrColorWithGroup    
            //作    者: yenange
            //功能说明: 设置带分组的表格的奇偶行换色  
            //输入参数: 表格(table或tbody)id, 奇行class, 偶行class,合并单元格的class,是否从第一行开始, 分组是第一列, 指针名称, 鼠标移上样式(可选)  
            //调用示例: $(function(){ $.fn.ChangeOddEvenTrColorWithGroup("tableList", "odd", "even", "tdGroup", false, true, "pointer", "mouseOver"); });        
            //输出参数:  
            //创建日期: 2011-09-29  
            (function ($) {
                jQuery.fn.ChangeOddEvenTrColorWithGroup = function (tabId, oddClass, evenClass, groupClass, fromFirstTr, GroupIsFirstCol, cursor, mouseOverClass) {
                    var $obj = fromFirstTr ? $("#" + tabId + " tr") : $("#" + tabId + " tr").not(":first");
                    var groupCol = GroupIsFirstCol ? "first" : "last";
                    var colNum = $obj.filter(":first").find("td").length;
                    $obj.each(function (i) {
                        if ($(this).find("td").length == colNum) {
                            $(this).find("td").filter(":" + groupCol).addClass(groupClass)
                            .siblings().addClass(i % 2 == 0 ? evenClass : oddClass).css("cursor", cursor);
                        } else {
                            $(this).find("td").addClass(i % 2 == 0 ? evenClass : oddClass).css("cursor", cursor);
                        }
                    })
                    if (typeof (mouseOverClass) != "undefined") {
                        $obj.mouseover(function (i) {
                            if ($(this).find("td").length == colNum) {
                                $(this).find("td").filter(":" + groupCol).siblings().addClass(mouseOverClass);
                            } else {
                                $(this).find("td").addClass(mouseOverClass);
                            }
                        }).mouseout(function (i) {
                            if ($(this).find("td").length == colNum) {
                                $(this).find("td").filter(":" + groupCol).siblings().removeClass(mouseOverClass);
                            } else {
                                $(this).find("td").removeClass(mouseOverClass);
                            }
                        });
                    }
                }
            })(jQuery);  
        </script>  
    </head>  
    <body>  
        <table id="table1" cellpadding="2" cellspacing="1" border="1" style="width: 100%;">  
            <tr>  
                <th>Class</th><th>Name</th><th>Age</th>  
            </tr>  
            <tbody id="tbodyList">  
            <tr>  
                <td>  
                    A</td>  
                <td>  
                    叶子</td>  
                <td>  
                    1</td>  
            </tr>  
            <tr>  
                <td>  
                    B</td>  
                <td>  
                    李子</td>  
                <td>  
                    2</td>  
            </tr>  
            <tr>  
                <td>  
                    C</td>  
                <td>  
                    王子</td>  
                <td>  
                    3</td>  
            </tr>  
            <tr>  
                <td>  
                    D</td>  
                <td>  
                    刘欢</td>  
                <td>  
                    4</td>  
            </tr>  
            </tbody>  
            </table>  
            <br />  
      
        <table id="tableList" cellpadding="2" cellspacing="1" border="1" style="width: 100%;">  
            <tr>  
                <th>Class</th><th>Name</th><th>Age</th>  
            </tr>  
            <tr>  
                <td rowspan="2">  
                    A</td>  
                <td>  
                    叶子</td>  
                <td>  
                    1</td>  
            </tr>  
            <tr>  
                <td>  
                    李子</td>  
                <td>  
                    2</td>  
            </tr>  
            <tr>  
                <td rowspan="3">  
                    B</td>  
                <td>  
                    王子</td>  
                <td>  
                    3</td>  
            </tr>  
            <tr>  
                <td>  
                    刘欢</td>  
                <td>  
                    4</td>  
            </tr>  
            <tr>  
                <td>  
                    马云</td>  
                <td>  
                    5</td>  
            </tr>  
            <tr>  
                <td>  
                    C</td>  
                <td>  
                    吴天</td>  
                <td>  
                    6</td>  
            </tr>  
            <tr>  
                <td>  
                    D</td>  
                <td>  
                    ??</td>  
                <td>  
                    7</td>  
            </tr>  
            <tr>  
                <td rowspan="2">  
                    E</td>  
                <td>  
                    吕梁</td>  
                <td>  
                    8</td>  
            </tr>  
            <tr>  
                <td>  
                    淡雅</td>  
                <td>  
                    9</td>  
            </tr>  
        </table>  
        <br />  
        <table id="tableList2" cellpadding="2" cellspacing="1" border="1" style="width: 100%;">  
            <tr>  
                <th>Name</th><th>Age</th>  
                <th>Class</th>  
            </tr>  
            <tr>  
                <td>  
                    叶子</td>  
                <td>  
                    1</td>  
                <td rowspan="2">  
                    A</td>  
            </tr>  
            <tr>  
                <td>  
                    李子</td>  
                <td>  
                    2</td>  
            </tr>  
            <tr>  
                <td>  
                    王子</td>  
                <td>  
                    3</td>  
                <td rowspan="3">  
                    B</td>  
            </tr>  
            <tr>  
                <td>  
                    刘欢</td>  
                <td>  
                    4</td>  
            </tr>  
            <tr>  
                <td>  
                    马云</td>  
                <td>  
                    5</td>  
            </tr>  
            <tr>  
                <td>  
                    吴天</td>  
                <td>  
                    6</td>  
                <td>  
                    C</td>  
            </tr>  
            <tr>  
                <td>  
                    ??</td>  
                <td>  
                    7</td>  
                <td>  
                    D</td>  
            </tr>  
            <tr>  
                <td>  
                    吕梁</td>  
                <td>  
                    8</td>  
                <td rowspan="2">  
                    E</td>  
            </tr>  
            <tr>  
                <td>  
                    淡雅</td>  
                <td>  
                    9</td>  
            </tr>  
        </table>  
    </body>  
    </html>
 
  相关解决方案