jQuery表格行突出显示onClick和恢复onChange交替css类

第一篇文章和新的jQuery。看着很难，但没有找到一个完全相关的职位。jQuery表格行突出显示onClick和恢复onChange交替css类

表中有交替的行颜色;一个类为NULL /空一个类= alt。 jQuery脚本部分用于点击时突出显示该行。

问题是：如何使用removeClass，然后恢复（addClass/toggleClass）在onChange事件上删除的特定类？任何帮助赞赏。韩国社交协会。（请参见下面小提琴）

HTML

<table id="fooBar" border="0"> 
    <tr> 
     <th>Text</th> 
     <th>Text</th> 
     <th>Text</th> 
     <th></th> 
     <th></th> 
    </tr> 
    <tr class=""> 
     <td>Text</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>image</td> 
     <td>image</td> 
    </tr> 
    <tr class="alt"> 
     <td>Text</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>image</td> 
     <td>image</td> 
    </tr> 
    <tr class=""> 
     <td>Text</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>image</td> 
     <td>image</td> 
    </tr> 
    <tr class="alt"> 
     <td>Text</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>image</td> 
     <td>image</td> 
    </tr> 
</table>

CSS

table { 
    width:100%; 
    border-collapse:collapse; 
    table-layout:auto; 
    vertical-align:top; 
    margin-bottom:15px; 
    border:1px solid #999999; 
} 

th { 
    font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    color: #F2EDEB; 
    border-right: 1px solid #C1DAD7; 
    border-bottom: 1px solid #C1DAD7; 
    border-top: 1px solid #C1DAD7; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    text-align: left; 
    padding: 6px 6px 6px 12px; 
    background: #522D25 url(images/bg_header.jpg) no-repeat; 
} 

tr { 
    background: #fff; 
    color: #261F1D; 
} 

tr:hover, tr.alt:hover { 
    color: #261F1D; 
    background-color: #E5C37E; 
} 

.highlighted { 
    color: #261F1D; 
    background-color: #E5C37E; 
} 

tr.alt { 
    background: #F5FAFA; 
    color: #B4AA9D; 
} 

td { 
    border-right: 1px solid #C1DAD7; 
    border-bottom: 1px solid #C1DAD7; 
    padding: 6px 6px 6px 12px; 
}

jQuery的

$(document).ready(function() { 
    $("tr").click(function() { 
     $(this).closest("tr").siblings().removeClass("highlighted"); 
     $(this).toggleClass("highlighted"); 
    }) 
}); 
// Note: currently only works for row without '.alt' css class assigned (ie. empty) 
// question is how to replace a class and then RESTORE the class onChange

这里是的jsfiddle：http://jsfiddle.net/codeChaos1988/kh4VY/1/

而且任何指点最好的教程网站实际上学习编程在JavaScript/jQuery也将不胜感激。

非常感谢您的帮助。

来源

2013-03-03 user2129943

，这样你就不用担心删除/恢复原始类，试着改变你的CSS到：

.highlighted { 
    color: #261F1D !important; 
    background-color: #E5C37E !important; 
}

对于JS：

$('table').on('click', 'tr', function() { 
    var state = $(this).hasClass('highlighted'); 
    $('.highlighted').removeClass('highlighted'); 
    if (! state) { $(this).addClass('highlighted'); } 
});

来源

2013-03-03 23:30:38 thatthatisis

谢谢thatthatisis。完美工作！希望其他用户可以使用这篇文章。干杯！！！ – user2129943 2013-03-03 23:41:35

谢谢thatthatisis。工作完美。加上一票 – Shwet 2014-06-25 10:21:29

-1

添加了此数据表中的初始化部分：

"createdRow": function(row, data, index) { 
      if (tableInitialized){ 
       flashRow(row); 
      }

这工作！

来源

2016-04-11 16:43:38 aaj

jQuery表格行突出显示onClick和恢复onChange交替css类

回答

相关问题