Accessing HTML this object within javascript
Question
I have some HTML code that uses some embedded python to create a table of results that have been extracted from an SQLlite database. The HTML also uses bootstrap to create a table to highlight the rows when the mouse hovers of each row.
<div class="col-md-6">
<h3> Suggested tools </h3>
<table class="table table-hover">
<tr><th> Tool </th> <th> Function </th> </tr>
{% for post in posts %}
<tr class="table-light" onclick="changeClass()"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
{% endfor %}
</table>
<p id="test"> </p>
</div>
When I select a particular row I want the row to change color. Using Bootcamp I know I can make this happen by changing the class property and the following code produces the desired result:
<tr class="table-light" onclick="this.className='success'"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
This works well as each row is generated within the loop so the this object makes sure only the selected row has the class changed. The problem is I have some further javascript code I want to add to the onclick event. Is there a way of using a javascript function to access the this object so that it is used in the same way as elements in HTML?
I've tried this but as anticipated no success HTML:
<tr class="table-light" onclick="changeClass()"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr> code here
Javascript:
function changeClass() {
return "this.className= 'table-success';}
4 answers
solution1
0 2021-03-01 08:10:34
You need delegation and unobtrusive non-inline code
Also your HTML is not valid. You should run the rendered page through a validator
const additem = id => console.log(id); document.querySelector(".table").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("add")) { additem(tgt.dataset.id) } else { const row = tgt.closest("tr"); if (row.classList.contains("table-light")) { row.classList.add("table-success"); } } })
.table-success { background-color:green}
<div class="col-md-6"> <h3> Suggested tools </h3> <table class="table table-hover"> <tr> <th> Tool </th> <th> Function </th> </tr> <tr> <td>tool</td> <td>summary</td> <td> <button type="button" class="add" data-id="{{post.id}}">ID1</button></td> </tr> <tr class="table-light"> <td>tool</td> <td>summary</td> <td> </tr> </table> <p id="test"> </p> </div>
solution2
0 2021-03-01 08:14:09
Just pass it to the function:
function changeClass(row) { console.log(row)}
<table> <tr class="table-light" onclick="changeClass(this)"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr> <tr class="table-light" onclick="changeClass(this)"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr> </table>
solution3
0 2021-03-01 08:17:18
You can do it by passing this with function call
function changeClass(row) { row.className= 'table-success' }
.table-success{ background-color:gray; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="col-md-6"> <h3>Suggested tools</h3> <table class="table table-hover"> <tr> <th>Tool</th> <th>Function</th> </tr> <tr class="table-light" onclick="changeClass(this)"> <td>some data</td> <td>some data</td> <td></td> </tr> <tr class="table-light" onclick="changeClass(this)"> <td>some data</td> <td>some data</td> <td></td> </tr> <tr class="table-light" onclick="changeClass(this)"> <td>some data</td> <td>some data</td> <td></td> </tr> </table> <p id="test"></p> </div> </body> </html>
solution4
-2 2021-03-01 08:11:22
Try this:
HTML:
<tr onclick="foo(this);"></tr>
JavaScript:
let foo = elem =>{
console.log(elem.className);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.