Question

我有表here

的例子

我想从行点击行中删除突出显示。

当我将鼠标悬停在行上时，背景会变灰。我希望能够删除行单击上的灰色背景，以便该行保持没有设置背景。

这可能吗？

我已经创建了选择单击的单元格和行的函数：

var test = function(element){
    var tdCaller = $(element);
    var parentRow = tdCaller.parent();
    var parentBody = parentRow.parent();
}

但我不知道如何在点击时从该行中删除突出显示？

Answer 1

只需将background:none设置为点击的行。

＆＃13;

$(document).ready(function(){
  $('.table-hover tbody tr').click(function(){
    $(this).css('background', 'none'); // Whatever color you want
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css>
<table id="tblBAENWC" class="table table-stripped table-bordered table-hover table-condensed col-sm-12">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="cursor:pointer;">1</td>
      <td style="cursor:pointer;">First name</td>
    </tr>
    <tr>
      <td style="cursor:pointer;">1</td>
      <td style="cursor:pointer;">First name</td>
    </tr>
    <tr>
      <td style="cursor:pointer;">1</td>
      <td style="cursor:pointer;">First name</td>
    </tr>
    <tr>
      <td style="cursor:pointer;">1</td>
      <td style="cursor:pointer;">First name</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

此代码段将有所帮助。

$(function(){
  $('.table-hover tr').on('click', function(){
    $(this).addClass('no-hover');
  });
});

/* When table row hover */

.table-hover tr:hover td{
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffffff;
}
/* After clicked row if user hover again */
.table-hover tr.no-hover:hover td{
  background-color: #ffffff;
  color: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <thead>
    <tr>
      <th>Table Head 1</th>
      <th>Table Head 2</th>
      <th>Table Head 3</th>
      <th>Table Head 4</th>
      <th>Table Head 5</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell content 1</td>
      <td>Table cell content 2</td>
      <td>Table cell content 3</td>
      <td>Table cell content 4</td>
      <td>Table cell content 5</td>
    </tr>
    <tr>
      <td>Table cell content 1</td>
      <td>Table cell content 2</td>
      <td>Table cell content 3</td>
      <td>Table cell content 4</td>
      <td>Table cell content 5</td>
    </tr>
    <tr>
      <td>Table cell content 1</td>
      <td>Table cell content 2</td>
      <td>Table cell content 3</td>
      <td>Table cell content 4</td>
      <td>Table cell content 5</td>
    </tr>
    <tr>
      <td>Table cell content 1</td>
      <td>Table cell content 2</td>
      <td>Table cell content 3</td>
      <td>Table cell content 4</td>
      <td>Table cell content 5</td>
    </tr>
    <tr>
      <td>Table cell content 1</td>
      <td>Table cell content 2</td>
      <td>Table cell content 3</td>
      <td>Table cell content 4</td>
      <td>Table cell content 5</td>
    </tr>
  </tbody>
</table>

Answer 3

我尝试尽量减少对代码的更改：

The link is here

Html（在tr上添加了类）：

private void btWebsite_Click(object sender, RoutedEventArgs e)
{
    var newTextBox = new TextBox();
    newTextBox.Text = "type the website address...";
    newTextBox.Foreground = Brushes.Gray;
    newTextBox.Width = 150;
    newTextBox.Name = "txtWebsite" + iWebsites;
    pnWebsite.Children.Add(newTextBox);
    pnWebsite.RegisterName(newTextBox.Name, newTextBox);

    iWebsites++;
}

Javascript（关注评论＆＃34;我的添加＆＃34;）：

public List<string> Websites
{
    get { return _websites; }
    set
    {
        if (value != _websites)
        {
            _websites = value;
            OnPropertyChanged("Websites");
        }
    }
}

CSS（关注评论＆＃34;我的添加＆＃34;）：

<table id="tblBAENWC" class="table table-stripped table-bordered table-hover table-condensed col-sm-12">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="mytr">
      <td style="cursor:pointer;" onclick="test(this);">1</td>
      <td style="cursor:pointer;" onclick="test(this);">First name</td>
    </tr>

    <tr class="mytr">
      <td style="cursor:pointer;" onclick="test(this);">1</td>
      <td style="cursor:pointer;" onclick="test(this);">First name</td>
    </tr>

    <tr class="mytr">
      <td style="cursor:pointer;" onclick="test(this);">1</td>
      <td style="cursor:pointer;" onclick="test(this);">First name</td>
    </tr>

    <tr class="mytr">
      <td style="cursor:pointer;" onclick="test(this);">1</td>
      <td style="cursor:pointer;" onclick="test(this);">First name</td>
    </tr>
  </tbody>

</table>

Answer 4

你可以用css做到这一点。在css文件中提供此代码

tr:hover td {background:#fff;}

你不需要jquery来改变悬停时的背景颜色。可以用CSS来完成

如果您希望单击该行时颜色为白色，请在JS中提供以下代码

 $(document).ready(function () {
        $('tr').click(function () {
            //Check to see if background color is set or if it's set to white.
                      $(this).css('background', 'white');


      });
});

从引导表中删除突出显示

4 个答案: