在JavaScript中访问HTML此对象

rwqw0loc 于 2023-05-12 发布在 Java

关注(0)|答案(4)|浏览(116)

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

<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，我知道我可以通过更改class属性来实现这一点，下面的代码会产生所需的结果：

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

这很有效，因为每行都是在循环中生成的，所以this对象确保只有选定的行更改了类。问题是我有一些进一步的JavaScript代码我想添加到onclick事件。有没有一种方法可以使用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

来源：https://stackoverflow.com/questions/66418506/accessing-html-this-object-within-javascript

4条答案

按热度按时间

8yoxcaq71#

您需要委派和不显眼的非内联代码
您的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>

赞(0）回复(0）举报 2023-05-12

ou6hu8tu2#

把它传递给函数：

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>

赞(0）回复(0）举报 2023-05-12

o4tp2gmn3#

你可以通过函数调用传递这个来实现

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>

赞(0）回复(0）举报 2023-05-12

daupos2t4#

试试这个：
HTML：

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

JavaScript：

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

赞(0）回复(0）举报 2023-05-12

我来回答

在JavaScript中访问HTML此对象

4条答案

相关问题

热门标签

最新问答