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

Posted 2023-05-07

【中文标题】通过纯 JS 从 tablerow//<tr onClick(myFunction> 获取 element.innerHTML

【英文标题】：get element.innerHTML via pure JS from tablerow//<tr onClick(myFunction>

【发布时间】：2021-12-05 10:13:04

【问题描述】：

我正在尝试启用一个弹出窗口，其中包含有关单击的表格元素的信息。 因此，我想获取单击元素的元素 ID。谢谢：D

问题

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

带有显示数据库数据的表格的 HTML 页面

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

带有表格的 HTML 页面图片

控制台日志输出图片

【问题讨论】：

把这个代码<td id='ID'>book.id</td>改成这个<td id='book.id'>book.id</td>

我按照你的建议更改了它，但现在我在控制台日志中总是得到 null。

【参考方案1】：

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

您总是得到 ID 1，因为当您执行 getElementByID("ID") 时，DOM 返回它找到的第一个具有该 ID 的元素，因为应该没有更多了。

【讨论】：

哦，是的，谢谢你的提示！我已经这样做了，但我知道得到值 null

【参考方案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%

输出控制台