如何在 html 中突出显示单击表格的行

Question

I have a problem with table on HTML using django,

i want to Hightlight the row where clicked on and get it's index

HTML CODE:

        <table class="table table-striped table-sm" id="tab1" >
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col">Nº</th>
              <th scope="col">Header</th>
              <th scope="col">Header</th>
              <th scope="col">Header</th>
              <th scope="col">Header</th>
            </tr>
          </thead>
          <tbody class="post">
            {% for post in posts %}

            <tr>
              <td><input type="checkbox"></td>
              <td><b><count> </count></b></td>
              <td>{{ post.head1 }}</td>
              <td>{{ post.head2 }}</td>
              <td>{{ post.head3 }}</td>
              <td>{{ post.head4 }}</td>
            </tr>

            {% endfor %}
            
          </tbody>
        </table>

Part of style sheet using counter:

      body {
          counter-reset: section;
        }

        count::before {
          counter-increment: section;
          content: "  " counter(section) " ";
        }

I try to use javascript code from many blog but not work. I can't use getelementbyid because i can't create dynamic IDs for all rows

Answer 1

You can use JavaScript to add an event listener to the table rows, and then use the this keyword to reference the row that was clicked on. You can then add a class to that row to highlight it and get its index. Here is an example of how you could do this:

var tableRows = document.querySelectorAll("#tab1 tbody tr");
for (var i = 0; i < tableRows.length; i++) {
    tableRows[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("highlight");
        if (current.length > 0) {
            current[0].className = current[0].className.replace(" highlight", "");
        }
        this.className += " highlight";
        console.log(this.rowIndex);
    });
}

This will add an event listener to each row in the table, and when a row is clicked, it will add a class called "highlight" to the row, and log the index of the row to the console.

You can also use the querySelectorAll method to select all rows and add a click event listener to them.

const rows = document.querySelectorAll("#tab1 tbody tr")
rows.forEach(row => {
    row.addEventListener("click", e => {
        rows.forEach(row => row.classList.remove("highlight"))
        e.currentTarget.classList.add("highlight")
        console.log(row.rowIndex + 1)
    })
});

This will add a click event listener to each row and remove the highlight class from all the rows and then add it to the one that was clicked on and then log the row index to the console.

You can also use jQuery, it's simple and effective too.

$("#tab1 tbody tr").click(function() {
  $("#tab1 tbody tr").removeClass("highlight");
  $(this).addClass("highlight");
  console.log($(this).index() + 1);
});