displayTag 给行加事件

最新推荐文章于 2024-05-21 20:57:05 发布

yuhua3272004

最新推荐文章于 2024-05-21 20:57:05 发布

阅读量1.7k

点赞数

分类专栏： jsp displaytag 文章标签： function table action html file

jsp 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

displaytag

1 篇文章 0 订阅

订阅专栏

displayTag 给行加事件 row event
http://jira.codehaus.org/browse/DISPL-92

Here's something you can use while you wait for this feature to be added.

 
    function highlightTableRows(tableId) {   
    var previousClass = null;   
    var table = document.getElementById(tableId);   
    var tbody = table.getElementsByTagName("tbody")[0];   
    var rows = tbody.getElementsByTagName("tr");   
    // add event handlers so rows light up and are clickable    
    for (i=0; i < rows.length; i++) {   
        rows[i].onmouseover = function() { previousClass=this.className;this.className+=' over' };   
        rows[i].onmouseout = function() { this.className=previousClass };   
        rows[i].onclick = function() {   
            var cell = this.getElementsByTagName("td")[0];   
            if (cell.getElementsByTagName("a").length > 0) {   
                var link = cell.getElementsByTagName("a")[0];   
                if (link.onclick) {   
                    call = link.getAttributeValue("onclick");   
                    // this will not work for links with onclick handlers that return false    
                    eval(call);   
                } else {   
                  location.href = link.getAttribute("href");   
                }   
                this.style.cursor="wait";   
            }   
        }   
    }   
}  
 
   

I put this in a global .js file and then call it after my </display:table> using:

<script type="text/javascript">highlightTableRows("userList");</script>

Where my table has an id:

<display:table id="userList">

===============================================================================

I have done a similar thing as above but expanded on it. You can only highlight one row. We wanted to do that coz we only we wanted to apply some kind of action to that row only.

 
    /**  
 * This JavaScript performs the task of highlighting a row in a displayTag table.  
 * The javascript is called by adding the following line in your JSP page after the  
 * declaration of your display tag  
 * <script type="text/javascript">highlightTableRows("searchResultTO");</script>  
 * An example is as follows:  
 * <html>  
 * <body>  
 * <displaytag:table name="${sessionScope.searchResultList}" id="searchResultTO"/>  
 * <script type="text/javascript">highlightTableRows("searchResultTO");</script>  
 * </body>  
 * </html>  
 */  
  
  
  
/**  
 * This function after the displayTag table has been created adds a onclick event  
 * handler to each row in the table. The onclick event will first reset all rows to  
 * the default background color which is white and then assign the clicked row to the  
 * highlight color which is a light green.  
 */  
function highlightTableRows(tableId) {   
    var previousClass = '';   
    var table = document.getElementById(tableId);   
    var tbody = table.getElementsByTagName("tbody")[0];   
    var rows = tbody.getElementsByTagName("tr");   
    // add event handlers so rows light up and are clickable    
    for (i=0; i < rows.length; i++) {   
        rows[i].onmouseover = function() {   
this.style.cursor="hand";   
};   
  
rows[i].onmouseout = function() {   
this.style.cursor='';   
};   
  
        rows[i].onclick = function() {   
//reset all styles to blank for all rows    
resetStylesAroundRow(this);   
this.style.backgroundColor = "#74BAB7";   
            var cell = this.getElementsByTagName("td")[0];   
            if (cell.getElementsByTagName("a").length > 0) {   
                var link = cell.getElementsByTagName("a")[0];   
                if (link.onclick) {   
                    call = link.getAttributeValue("onclick");   
                    // this will not work for links with onclick handlers that return false    
                    eval(call);   
                } else {   
                  location.href = link.getAttribute("href");   
                }   
                this.style.cursor="wait";   
            }   
        };   
    }   
}   
  
/**  
 * Resets the table rows back to the default color.  
 */  
function resetStylesAroundRow(row) {   
    var previousClass = '';   
    var table = row.parentElement.parentElement;   
    var tbody = table.getElementsByTagName("tbody")[0];   
    var rows = tbody.getElementsByTagName("tr");   
    for (i=0; i < rows.length; i++) {   
        rows[i].style.backgroundColor = "white";   
    }   
}  
 
   

-----------------------------------------------------------------------------

JavaScript与displayTag标签的合作 -- 操作表头

http://rmn190.javaeye.com/blog/257135

http://www.devx.com/webdev/10MinuteSolution/31020/0/page/3

yuhua3272004

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
displayTag 给行加事件

displayTag 给行加事件 row event http://jira.codehaus.org/browse/DISPL-92 Heres something you can use while you wait for this feature to be added. function highlightTableRows(tableId) { va
复制链接

扫一扫