Question

我正在尝试突出显示最后一个项目的行。尝试在搜索中找到一些jquery代码，但它们都没有尝试工作。必须做一些基本错误的事情。这是一个尝试了一个解决方案的jsfiddle：http://jsfiddle.net/birchy/he9ts/1/

<table>
<tr>
<td>====></td>
<td class='msgRow' onclick='loadMsg();'>Content1</td>
</tr>
<tr>
<td>====></td>
<td class='msgRow' onclick='loadMsg();'>Content2</td>
</tr>
<tr>
<td>====></td>
<td class='msgRow' onclick='loadMsg();'>Content3</td>
</tr>
<tr>
<td>====></td>
<td class='msgRow' onclick='loadMsg();'>Content4</td>
</tr>
</table>

function loadMsg()
{
alert('row clicked');
$(this).closest("tr").css('background-color','green');
$(this).css('background-color','red');  
}

Answer 1

只有您需要在每个td的onclick上传递此内容才能获得点击：

<tr>
    <td>====></td>
    <td class='msgRow' onclick='loadMsg(this);'>Content3</td>
</tr>

你Js将会：

function loadMsg(e)
{
    alert(e);
    $(e).closest("tr").css('background-color','green');
    $(e).css('background-color','red'); 
}

Live Demo

另一种方式只有Jquery（Recomended）：

$(document).ready(function(){
    $('.msgRow').on('click', function(){
        $(this).closest("tr").css('background-color','green');
        $(this).css('background-color','red');  
    });
});

并删除所有td中的onclik。

Answer 2

试试这个

首先，仅使用this

传递点击您的功能的元素

<tr>
    <td>===></td>
    <td class="msgRow" onclick="onclick(this)">Content 3</td>
</tr>

然后在你的js上

function loadMsg(e){
    // remove first the background applied on all tr
    $('.msgRow').closest('tr').css('background-color','none'); 

    // remove also the background applied on all 'msgRow' classes
    $('.msgRow').css('background-color','none');

    // then you can now change the background color of the clicked row and cell
    $(e).closest('tr').css('background-color','green');
    $(e).css('background-color','red');
}

<强> DEMO

更改表格行的背景颜色单击

2 个答案: