Change Cursor to Pointer and Make the text bold in <td> element

Question

I have some question regarding html. I am using AJAX to process a element. But the problem is how do i make the text inside the td bold and change the cursor to pointer when hovering over the element. I tried onmouseover but it doesnt work.

my td element is this

<td id='buildingName$i' onclick='tdClick($i)'>".$row['PROJECTNAME']."</td>

thanks guys for your help

Answer 1

Why not just use CSS? You could easily do something like this:

td:hover {
    font-weight: bold;
    cursor: pointer;
}

Answer 2

Doing it using css is the best solution. Here is the jquery option if you need it.

 $("#test").hover(function(event) { $("#test").addClass("highlighted"); }, function(event) { $("#test").removeClass("highlighted"); }); 

 .highlighted { font-weight: bold; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td id="test">HTML</td> <td>Javascript</td> </tr> </table> 

Answer 3

1. use CSS as described in other answer
2. remove the onclick from the TD and instead use unobtrusive delegation - for example in jQuery:

:

$(function() {
  $("#tableContainer").on("click",".clickableTD",function(){
    var idx = parseInt(this.id.replace("buildingName",""),10);
    // here you do whatever you did in tdClick
  });
});

assuming

<div id="tableContainer"></div>

and

<td id='buildingName$i' class='clickableTD'>".$row['PROJECTNAME']."</td>