单击按钮时突出显示行

Question

当我单击该行的编辑按钮时，我正在使用以下脚本来突出显示该行。当我点击按钮时，我正在传递行的 Id！我的问题是代码可以在 Mozila Firefox 中运行，但不能在 Google Chrome 上运行。以下代码有什么问题。

function high(id)
{
    $('tr').removeAttr('style'); 
    document.getElementById(id).style="background-color:#eeeeea;color:#000000;font-weight:500;";
}

Answer 1

您需要单独设置样式对象的属性。

var elem = document.getElementById(id);
//Set properties
elem.style.color = "#000000";
elem.style.fontWeight = "500";
elem.style.backgroundColor = "#eeeeea";

由于您正在使用 jquery，您可以使用 .css()

$('#' + id).css({
    "background-color" :"#eeeeea",
    "color":"#000000",
    "font-weight":"500";
});

但是，我建议您创建一个 CSS class 然后使用它。

$('tr').removeClass('highlight'); 
$('#' + id).addClass('highlight');

Answer 2

试试这个，

$('#'+id).attr("style","background-color:#eeeeea;color:#000000;font-weight:500;");

Working 也在 chrome 上。

The reason, can be style is an object which has some properties in it and chrome may not allow to overwrite it. So the custom string you passed in style will not apply to it, hence no changes applied to the element.

Answer 3

这是一个演示，可以将特殊的 class 添加到编辑行并删除其他行的 class。这是使用 jquery 的 closest() 方法完成的。您甚至不需要为此使用任何 id。

$("button").on("click",function(){
  $("tr").each(function(){
   $(this).removeClass("marked");
  });
  $(this).closest("tr").addClass("marked");
 });

 .marked{
  background-color:#eeeeea;color:#000000;font-weight:500;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <table>
  <tr>
   <td>This is TD</td>
   <td><button>Edit</button></td>
  </tr>
  <tr>
   <td>This is TD</td>
   <td><button>Edit</button></td>
  </tr>
  <tr>
   <td>This is TD</td>
   <td><button>Edit</button></td>
  </tr>
 </table>

单击按钮时突出显示行

Highlight row when clicked on button

javascript

jquery

mozilla

google-chrome