通过纯 JS 从表行获取 element.innerHTML//<tr onClick(myFunction>

Question

我正在尝试启用弹出窗口 window，其中包含有关所单击的 table 元素的信息。因此我想获取被点击元素的元素 ID。谢谢 :D

问题

无论我单击哪个 table 条目，我总是得到相同的 ID//table 元素。

HTML 带有 table 的页面显示数据库中的数据


{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
   <div class="container-fluid" style='background-color:aquamarine;'></div>
   <div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
   <div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
   <form action='' method="POST">
      {%csrf_token%}
      <input type='text' name='isbn' placeholder="ISBN-13 Number...">
      <button type='submit'>Add</button>
   </form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
   <table class='table table-hover'>
      <thead>
         <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Author</th>
            <th>Kategorie</th>
            <th>Seitenzahl</th>
         </tr>
      </thead>
      <tbody>
         {%for book in book_table%}
         <!--tr onClick()-->
            <tr onClick='get_element_ID()'>
               <td id='ID'>{{book.id}}</td>
               <td>{{book.title}}</td>
               <td>{{book.author}}</td>
               <td>{{book.kategorie}}</td>
               <td>{{book.seitenzahl}}</td>
            </tr>
         {%endfor%}
      </tbody>
      <tfoot>
         <tr>
            <td>
               <p>footer</p>
            </td>
         </tr>
      </tfoot>
   </table>
</div>
<script>
   function get_element_ID(){
      var id = (this).document.getElementById('ID');
      console.log(id);
      
   }
</script>
{%endblock main%}

带有 Table

的 HTML 页面的图片

控制台日志输出图片

Answer 1

在 HTML DOM 中，您不能拥有超过 1 个具有相同 ID 的项目，对于您所有的 td 标签，id 都是 ID，因此如果您更改 <td id="ID"> with <td id={{book.id}}> , 每个 td 必须有正确的 id.

您一直在获取 ID 1，因为当您执行 getElementByID("ID") DOM returns 时，它会找到具有该 ID 的第一个元素，因为应该没有更多了。

Answer 2

如上所述，这个问题是一个相当愚蠢的错误，即 getElementById('ID') 中请求的 ID 始终相同。

这个知识应该正常工作：


{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
   <div class="container-fluid" style='background-color:aquamarine;'></div>
   <div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
   <div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
   <form action='' method="POST">
      {%csrf_token%}
      <input type='text' name='isbn' placeholder="ISBN-13 Number...">
      <button type='submit'>Add</button>
   </form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
   <table class='table table-hover'>
      <thead>
         <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Author</th>
            <th>Kategorie</th>
            <th>Seitenzahl</th>
         </tr>
      </thead>
      <tbody>
         {%for book in book_table%}
         <!--tr onClick()-->
            <tr onClick='get_element_ID("{{book.id}}")'>
               <td id="{{book.id}}">{{book.id}}</td>
               <td>{{book.title}}</td>
               <td>{{book.author}}</td>
               <td>{{book.kategorie}}</td>
               <td>{{book.seitenzahl}}</td>
            </tr>
         {%endfor%}
      </tbody>
      <tfoot>
         <tr>
            <td>
               <p>footer</p>
            </td>
         </tr>
      </tfoot>
   </table>
</div>
<script>
   function get_element_ID(id){
      var book_id = document.getElementById(id);
      console.log(book_id);
   }
</script>
{%endblock main%}

通过纯 JS 从表行获取 element.innerHTML//<tr onClick(myFunction>

get element.innerHTML via pure JS from tablerow//<tr onClick(myFunction>

html

javascript

onclick

innerhtml

问题

这个知识应该正常工作：

输出控制台