单击按钮时突出显示行

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

这是一个将特殊类添加到编辑行并删除其他行上的类的演示。 这是使用jquery的最近方法（）来完成的。 您甚至不需要为此使用任何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> 

Answer 2

您需要分别设置样式对象的属性。

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类，然后再使用它。

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

Answer 3

尝试这个，

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

也在chrome上工作 。

原因可能是样式是其中具有某些属性的对象，而chrome可能不允许覆盖它。 因此，您以样式传递的自定义字符串将不适用于它，因此不会对元素进行任何更改。