如何通过javascript onClick Event方法突出显示一行？

Question

I've a list of data from db which I'm showing in each row on a Table. 我有一个来自db的数据列表，该列表显示在表的每一行中。 I want when I click a row it's should be remain highlighted with color. 我希望当我单击一行时，它应该保持用颜色突出显示。 But my following code is highlighting all row. 但是我的以下代码突出显示了所有行。 Can you help me about it. 你能帮我一下吗。

It's should be highlight only one row which I clicked. 它应该仅突出显示我单击的一行。

My code 我的密码

<script type="text/javascript">
function visited(a) {
tr = a.parentNode.parentNode;
tr.style.backgroundColor = "red";
}
</script>

<?php
    echo "<table width='100%' cellpadding='0' cellspacing='0'>";
    echo "<thead>";
    echo "<tr>";                
    echo "<td class='' valign='top' width='200'></td>";
    echo "<td class='' valign='top' width='125'></td>";                             
    echo "<td class='' valign='top' width='125'></td>";                             
    echo "<td class='' valign='top' width='125'></td>";                             
    echo "<td class='' valign='top' width='125'></td>";                             
    echo "</tr>";   
    echo "</thead>";
    echo "<tbody>";             

while($res =  mysql_fetch_array($get)){
    $cdid = $res['cdid'];
    $family_name = $res['family_name'];
    $given_name = $res['given_name'];
    $work_phone = $res['work_phone'];
    $mobile_phone = $res['mobile_phone'];
    $email = $res['email'];
    $email_private = $res['email_private'];
    $cid = $res['cid'];
    $department = $res['department'];
    $title = $res['title'];

    $getComapnyName =  mysql_query("SELECT company_name FROM company WHERE cid = '$cid' ");
    $resCompany =  mysql_fetch_array($getComapnyName);
    $companyName =  $resCompany['company_name'];

    if (strlen($companyName) >= 20) {
        $companyName =  substr($companyName, 0, 10). " ... " . substr($companyName, -5);
    }else{
        $companyName = $companyName;
    }           
    echo "<tr onclick='getDetails($cdid),showNotexBox($cdid),showAllNotesBox($cdid), visited(this);'>";                             
    echo "<td class='' valign='top'>$companyName</td>";
    echo "<td class='' valign='top'>$family_name</td>";
    echo "<td class='' valign='top'>$given_name</td>";
    echo "<td class='' valign='top'>$department</td>";
    echo "<td class='' valign='top'>$title</td>";

    echo "</td>";
    echo "</tr>";
    }
    echo "</tbody>";
    echo "</table>";    
?>

Answer 1

If you want to go with jQuery you can do the following. 如果要使用jQuery，可以执行以下操作。 Just copy paste the code and run it 只需复制粘贴代码并运行

  <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>

      <script type="text/javascript">


    var Color = {
        initialize: function() {
                $(document).on("click", ".trow", Color.setColor)                                                
        },
        setColor: function() {

            $(".trow").css('background-color','#fff');
            this.style.backgroundColor = 'red';            
        }
    };          
    $(document).ready(function(){
        Color.initialize();
    });     
    </script>        
   </head>
   <body>
   <table width='100%' cellpadding='0' cellspacing='0'>
   <tbody>                
   <tr class='trow' id='r1'>                             
    <td class='' valign='top'>value1</td>
    <td class='' valign='top'>value2</td>
    <td class='' valign='top'>value3</td>
    <td class='' valign='top'>value4</td>
    <td class='' valign='top'>value5</td>
   </tr>
   <tr class='trow' id='r2'>                             
    <td class='' valign='top'>price1</td>
    <td class='' valign='top'>price2</td>
    <td class='' valign='top'>price3</td>
    <td class='' valign='top'>prive4</td>
    <td class='' valign='top'>price5</td>
   </tr>    
   </tbody>
   </table>
   </body>
   </html>

Anyway, you can add or remove classes with jQuery and use css for styling 无论如何，您可以使用jQuery添加或删除类，并使用CSS进行样式设置

Answer 2

Since your a argument is referencing the <tr> being clicked, by using a.parentNode.parentNode you're actually changing the backgroundColor of the table. 由于您a参数引用了被单击的<tr> ，因此通过使用a.parentNode.parentNode实际上可以更改表的backgroundColor 。

Try this instead: 尝试以下方法：

function visited(tr) {
    tr.style.backgroundColor = "red";
}

As per your edit, try this: 根据您的修改，尝试执行以下操作：

function visited(tr) {
    var table = tr.parentNode.parentNode;
    var trs = table.getElementsByTagName('tr');

    for (var i = 0; i < trs.length; i++)
        {
        trs[i].style.backgroundColor = null;
        trs[i].style.color = null;
        }

    tr.style.backgroundColor = '#000';
    tr.style.color = '#fff';
}

如何通过javascript onClick Event方法突出显示一行？

问题描述

2 个解决方案

解决方案1
1 2014-08-07 13:15:47

解决方案2
0 已采纳 2014-08-07 12:43:12

如何通过javascript onClick Event方法突出显示一行？

问题描述

2 个解决方案

解决方案1 1 2014-08-07 13:15:47

解决方案2 0 已采纳 2014-08-07 12:43:12

解决方案1
1 2014-08-07 13:15:47

解决方案2
0 已采纳 2014-08-07 12:43:12