将类添加到表行 onclick

Question

我想在点击时向表格行添加一个类：

<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>

我怎样才能做到这一点？ obj.className='diagram-popup'; 语法似乎是错误的。

Answer 1

为什么要用这么多并发症？

使用 jQuery 提供了一个关键字this

你可以这样使用：

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

和 jquery 一样：

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

Answer 2

通过利用Element Web API和事件委托（管理事件处理），您可以很容易地做到这一点。 您需要注意以下代码中的handleClick是如何工作的（大多数其他代码只是为了展示如何使用 Web API 设置表格，而不是写出 HTML） - 注释非常具有解释性，但是 lmk 如果您还有其他问题：

 // 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>

Answer 3

要具体回答您的问题，请在该上下文中使用this ：

<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/

如果您使用 jQuery，我会避开内联处理程序并为此使用 jQuery 的处理程序：

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