如何使用Jquery选择表格行？

我试图使用JQuery选择一个表行，但它似乎不会触发.selected事件。 我把代码放在了JSFiddle上

http://jsfiddle.net/tonymaloney1971/3tevxmps/1/

我希望在单击鼠标时选择一个表格行并更改行颜色并显示包含所选行信息的警报消息。

我尝试了以下但它不起作用：

$("td").click(function () { $('.selected').removeClass('selected'); $(this).addClass("selected"); }); 

有任何想法吗？

谢谢

Answer 1

试试这个： 小提琴演示

你可以添加每个类的类似：产品的“p”，inf的“i”，注释的“n”，以及点击事件。

js变化：

 $("tbody tr").click(function () { $('.selected').removeClass('selected'); $(this).addClass("selected"); var product = $('.p',this).html(); var infRate =$('.i',this).html(); var note =$('.n',this).html(); alert(product +','+ infRate+','+ note); }); 

css变化：

 table.formatHTML5 tr.selected { background-color: #e92929 !important; color:#fff; vertical-align: middle; padding: 1.5em; } 

Answer 2

您必须将事件放在表行（tr）上，然后更改每个表格单元格的颜色（td）

 $("tr").click(function () { $('.selected').removeClass('selected'); $(this).find("td").addClass("selected"); }); 

Answer 3

你是在tbody内，所以你必须使用这样的东西

 $("#myTable tbody tr").live('click', function (event) { //adding class //removing class }); 

注意： live可能不支持最新版本的jquery。 相应地使用ON

工作小提琴： http ： //jsfiddle.net/supercool/550nq015/

Answer 4

我检查了你的代码..这是我的解决方案。

首先，可点击元素是td元素。 所以在JQuery函数中你需要询问这个元素的父元素。 为此，您可以使用此代码。

 $("td").click(function () { $('.selected').removeClass('selected'); $(this).parents('tr').addClass('selected'); }); 

它将从您单击的td向您的父tr元素添加一个类。 我注意到你提供的css只适用于td元素。 所以我为选定的行元素编写了新规则。

 table.formatHTML5 tr.selected{ background-color: #e92929 !important; vertical-align: middle !important; height: 4em; } 

否则，您还可以为表中显示的每个tr元素添加onClick html事件。

希望这个答案可以帮到你