如何通过右键单击更改行的背景颜色

时间：2015-05-07 05:53:47

标签： javascript jquery html css twitter-bootstrap

当我右键单击表格中的一行时，应显示一个菜单，并且该行的背景将变为黄色。在删除菜单的同时，应将背景颜色更改为默认颜色。

此外，右键单击下一行时，应将上一行和所选行更改为默认颜色。

我不知道该怎么做。

$(function() {

    var $contextMenu = $("#contextMenu");

    $("body").on("contextmenu", "table tr", function(e) {
         $contextMenu.css({
              display: "block",
              left: e.pageX,
              top: e.pageY
         });
         return false;
    });

    $('html').click(function() {
         $contextMenu.hide();
    });

});
#contextMenu {
  position: absolute;
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>

  <table id="mt" class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

  <div id="contextMenu" class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
      <li><a tabindex="-1" href="#">Action</a>
      </li>
      <li><a tabindex="-1" href="#">Another action</a>
      </li>
      <li><a tabindex="-1" href="#">Something else here</a>
      </li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a>
      </li>
    </ul>
  </div>

</body>

</html>

3 个答案:

答案 0 :(得分：0)

以下是您问题的答案。

使用$(this).css("background-color", "yellow");

下面：

$("body").on("contextmenu", "table tr", function(e) {
             $contextMenu.css({
                  display: "block",
                  left: e.pageX,
                  top: e.pageY
             });
             $('table tr').css("background-color", ""); //Remove previos color.
              $(this).css("background-color", "yellow"); //Here Change color to yellow.
             return false;
        });

回到默认值：

$('html').click(function() {
            $('table tr').css("background-color", ""); //Back to Default 
             $contextMenu.hide();

        });

检查

＆＃13;
＆＃13; 
$(function() {

    var $contextMenu = $("#contextMenu");

    $("body").on("contextmenu", "table tr", function(e) {
         $contextMenu.css({
              display: "block",
              left: e.pageX,
              top: e.pageY
         });
           $('table tr').css("background-color", "");
          $(this).css("background-color", "yellow"); 
         return false;
    });

    $('html').click(function() {
        $('table tr').css("background-color", "");
         $contextMenu.hide();
     
    });
  
  

});
＆＃13; 
#contextMenu {
  position: absolute;
  display: none;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>

  <table id="mt" class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

  <div id="contextMenu" class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
      <li><a tabindex="-1" href="#">Action</a>
      </li>
      <li><a tabindex="-1" href="#">Another action</a>
      </li>
      <li><a tabindex="-1" href="#">Something else here</a>
      </li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a>
      </li>
    </ul>
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

希望它有所帮助。

答案 1 :(得分：0)

$(function() {

    var $contextMenu = $("#contextMenu");

    $("body").on("contextmenu", "table tr", function(e) {
         $contextMenu.css({
              display: "block",
              left: e.pageX,
              top: e.pageY

         });
        $('table tr').css('background','none');
        $(this).css('background','yellow');
         return false;
    });

    $('html').click(function() {
         $contextMenu.hide();
        $('table tr').css('background','none');
    });

});

DEMO Here

答案 2 :(得分：0)

尝试添加/删除类到tr：

＆＃13;
＆＃13; 
$(function() {

  var $contextMenu = $("#contextMenu");
  /* changed selector to target only tbody tr */
  $("#mt tbody tr").on("contextmenu", function(e) {
    $contextMenu.css({
      display: "block",
      left: e.pageX,
      top: e.pageY
    });
    $(this).addClass('selected').siblings().removeClass('selected'); //added this line
    return false;
  });

  $('html').on('click', function() {
    $contextMenu.hide();
    $("#mt tbody tr").removeClass('selected'); //added this line
  });

});
＆＃13; 
#contextMenu {
  position: absolute;
  display: none;
}
/* added this class */

tr.selected {
  background: yellow;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>

  <table id="mt" class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

  <div id="contextMenu" class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
      <li><a tabindex="-1" href="#">Action</a>
      </li>
      <li><a tabindex="-1" href="#">Another action</a>
      </li>
      <li><a tabindex="-1" href="#">Something else here</a>
      </li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a>
      </li>
    </ul>
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题