在javascript中访问HTML这个对象

问题描述

我有一些 HTML 代码，它使用一些嵌入式 python 创建一个从 sqllite 数据库中提取的结果表。 HTML 还使用引导程序创建一个表格，以在鼠标悬停在每一行上时突出显示行。

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

当我选择特定行时，我希望该行改变颜色。使用 Bootcamp 我知道我可以通过更改类属性来实现这一点，以下代码会产生所需的结果：

<tr class="table-light" onclick="this.className='success'"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>

这很有效，因为每一行都是在循环中生成的，因此 this 对象确保只有选定的行更改了类。问题是我还有一些想要添加到 onclick 事件的 javascript 代码。有没有办法使用 javascript 函数来访问 this 对象，以便像 HTML 中的元素一样使用它？

我已经试过了，但正如预期的那样没有成功 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';}

解决方法

你需要委托和不显眼的非内联代码

您的 HTML 也无效。您应该通过验证器运行呈现的页面

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>

只需将其传递给函数：

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>

你可以通过函数调用传递它

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>

试试这个：

HTML：

<tr onclick="foo(this);"></tr>

JavaScript：

let foo = elem =>{
    console.log(elem.className);
}

bootcamp html javascript