add a class to a table row onclick

I want to add a class to a table row onclick:

<tr class="gradeA " onclick="开发者_开发技巧window.location.href='games/BG-1001.php'; obj.className='diagram-popup';" >

...

<!--Another Pop-up for diagram-->
<script src="js/jquery.popupWindow-min.js" ></script> 
<script>
    $('.diagram-popup').popupWindow({centerBrowser:1, height:560, width:1024});
</script>

How can I do this? The obj.className='diagram-popup'; syntax appears to be wrong.

---

Why use so many complications ?

Using jQuery provides a keyword this

Which u can use like this :

<tr class="add">Some thing</tr>

And jquery like :

$('.add').click(function() {
$(this).addClass('addedclass');
})

---

To answer your question specifically, use this in that context:

<table>
    <tr onclick="this.className='test';alert(this.className);">
        <td>Click me (I will replace the className)</td>
    </tr>
    <tr onclick="this.className+=' test';alert(this.className);">
        <td>Click me to add (I will add to the className, click more than once)</td>
    </tr>
    <tr class="test">
        <td>Click me for jQuery handler (I will only add classes once when clicked more than once)</td>
    </tr>
</table>

$('.test').click(function(){
    $(this).addClass('test'); // Note, will not add the same class more than once
    alert(this.className);
});

http://jsfiddle.net/userdude/NBU8L/

If you're using jQuery, I would steer clear of inline handlers and use jQuery's handlers for this:

$('.gradeA').click(function(){
    $(this).addClass('diagram-popup')
           .popupWindow({
               centerBrowser:1,
               height:560,
               width:1024
           });
});

---

You can do this pretty easily by taking advantage of the Element Web API and event delegation (to manage event handling). You'd want to take note of how handleClick works in the code below (most of the other code is simply to show how to setup table using the Web API, instead of writing out the HTML) - comments are pretty explanatory, but lmk if you have further questions:

// Reference to our table DOM element
const tableEl = document.querySelector('#tableEl');

// Style class we want to add to clicked rows
const cls = "foo";

// Function to generate a single tr element to add to our table
const generateTrEl = i => {
  const trEl = document.createElement('tr'); // Create a tr
  const tdEl = document.createElement('td'); // Create a td to go inside tr
  trEl.setAttribute('class', 'gradeA'); // Add the specified attribute
  tdEl.setAttribute('colspan', '1'); // Set the colspan to stretch whole table
  tdEl.insertAdjacentText('afterbegin', i); // Insert the text in the td
  trEl.insertAdjacentElement('beforeend', tdEl); // Insert the td in the tr

  return trEl;
};

// Event handling function that takes advantage of event delegation (so we don't have to manage multiple listners in our code)
const handleClick = e => {
  if (e.target.tagName === 'TD') {
    e.target.classList.add(cls);
  }
};

// Setup the table for testing functionality 
const init = () => {
  for (let i = 0; i < 10; i += 1) {
    tableEl.appendChild(generateTrEl(i));
  }

  tableEl.addEventListener('click', handleClick);
};

init();

.foo {
  background-color: yellow;
}

<table id="tableEl" border="1" width="300px"></table>