從tablerow中通過純JS獲取element.innerHTML//<tronClick(myFunction>

我正在嘗試啟用一個彈出視窗，其中包含有關單擊的表格元素的資訊。因此我想獲取被點擊元素的元素 ID。感謝：D

問題

無論我單擊哪個表條目，我總是得到相同的 ID//table 元素。

帶有顯示資料庫資料的表格的 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 頁面圖片

控制臺日志輸出圖片

uj5u.com熱心網友回復：

在 HTML DOM 中，您不能有超過 1 個具有相同 id 的專案，對于您所有的 td 標簽，id 都是 ID，因此如果您更改<td id="ID"> with <td id={{book.id}}>，每個 td 必須具有正確的 id。

你總是得到 ID 1，因為當你這樣做時getElementByID("ID")，DOM 回傳它找到的第一個具有該 ID 的元素，因為應該沒有更多元素了。

uj5u.com熱心網友回復：

如上所述，問題是一個相當愚蠢的錯誤，即請求的 IDgetElementById('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%}

輸出控制臺

標籤：javascript html 点击 内页

上一篇：哪個更大？！我的js代碼有問題

下一篇：按Enter時提交表單（待辦事項串列）