使用jQuery向表中添加一行后如何阻止文本突出显示

Question

I am appending a row to a table using jQuery. My code looks like:

var tbody = $("#properties tbody");
tbody.empty();

tbody.append(
    "<tr>" + 
    "<td class='first'>State</td>" +        
    "<td>" + element.state + "</td>" + 
    "</tr>"
    );   

tbody.append(
    "<tr>" + 
    "<td>Probability</td>" +        
    "<td>" + element.prob.toFixed(6) + "</td>" + 
    "</tr>"
    );

The problem is that, after doing this, the text in the table is highlighted. How can I stop that from happening?

Here is a JSFiddle reproducing the problem: http://jsfiddle.net/pzjeavwo/

Thanks!

Answer 1

I checked your fiddle and the table row is not highlighted upon creation. However, if, after creating the row, I double-click, it will be highlighted - but that is true for any html content that you double-click on any web page, so it looks like your code is working fine!

Answer 2

Try adding the following CSS to the element whose text is being highlighted.

-webkit-user-select:none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;

So it may looking something like this in your css code

.first {
    -webkit-user-select:none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

user-select disables highlighting https://developer.mozilla.org/en-US/docs/Web/CSS/user-select